JavaScript Tutorial/jQuery/slideDown
Содержание
Hide and Slide down
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").hide(); $("p").slideDown(); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
Slide down and set focus
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { $("input").slideDown(1000,function(){ $(this).focus(); }); }); }); </script> <style> input { display:none;margin:10px; } </style> </head> <body> <body>
Click me
<input type="text" /> <input type="text"/> <input type="text" /> </body>
</html></source>
Slide down fast
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").hide(); $("p").slideDown("fast"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
Slide down form fields
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function () { $("input").slideDown(1000,function(){ $(this).focus(); }); }); }); </script> <style> input { display:none;margin:10px; } </style> </head> <body> <body>
Click me
<input type="text" /> <input type="text"/> <input type="text" /> </body>
</html></source>
Slide down in milliseconds
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").hide(); $("p").slideDown(10000); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
Slide down slowly
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("p").hide(); $("p").slideDown("slow"); }); }); </script> </head> <body> <body>
Hello
</body>
</html></source>
slideDown(speed, callback): Only the height is adjusted for this animation
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").slideDown("slow"); } else { $("div").hide(); } });
}); </script> </head> <body> <body>
asdf
asdf
asdf
asdf
</body>
</html></source>
Slide to show para
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").one("click", function () { if ($(this).is(":first-child")) { $("p").text("It"s the first div."); }else{ $("p").text("It"s NOT the first div."); } $("p").hide().slideDown("slow"); }); }); </script> <style> div { border:2px white solid;} </style> </head> <body> <body> Press each to see the text.
asdf
asdf
asdf
asdf
asdf
asdf
</body>
</html></source>