JavaScript Tutorial/jQuery/slideUp
Содержание
- 1 30. Animates all divs to slide up, completing the animation within 400 milliseconds.
- 2 30. Animates all form controls to slide up
- 3 30. Click to slide up
- 4 30. Slide up a DIV tag
- 5 30. Slide up callback
- 6 30. Slide up fast
- 7 30. Slide up form controls
- 8 30. Slide up in milliseconds
- 9 30. Slide up slowly
- 10 30. slideUp(speed, callback): Only the height is adjusted for this animation
30. Animates all divs to slide up, completing the animation within 400 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(){
$(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").show("slow"); } else { $("div").slideUp(); } });
}); </script> </head> <body> <body> Click me!
asdf
asdf
asdf
asdf
asdf
</body>
</html></source>
30. Animates all form controls to slide up
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("button").click(function () { $(this).parent().slideUp("slow", function () { $("#msg").text($("button", this).text() + " has completed."); }); });
}); </script> </head> <body> <body> <button>Hide One</button> <input type="text" value="One" /> <button>Hide Two</button> <input type="text" value="Two" /> <button>Hide Three</button> <input type="text" value="Three" />
</body>
</html></source>
30. Click to slide up
<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 () { $(this).slideUp(); });
}); </script> </head> <body> <body>
asdf
asdf
</body>
</html></source>
30. Slide up a DIV tag
<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 () { $("div").slideUp(); }); }); </script> </head> <body> <body>
Click me
</body>
</html></source>
30. Slide up callback
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $(this).parent().slideUp("slow", function () { alert("done"); }); });
}); </script> </head> <body> <body>
Click me<button>button</button>
</body>
</html></source>
30. Slide up 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(){ $("div").click(function () { $("div").slideUp("fast"); }); }); </script> </head> <body> <body>
Click me
</body>
</html></source>
30. Slide up form controls
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $(this).parent().slideUp("slow", function () { alert("done"); }); });
}); </script> </head> <body> <body>
Click me<button>button</button>
</body>
</html></source>
30. Slide up 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(){ $("div").click(function () { $("div").slideUp(2000); }); }); </script> </head> <body> <body>
Click me
</body>
</html></source>
30. Slide up 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(){ $("div").click(function () { $("div").slideUp("slow"); }); }); </script> </head> <body> <body>
Click me
</body>
</html></source>
30. slideUp(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").show("slow"); } else { $("div").slideUp(); } });
}); </script> </head> <body> <body> Click me!
asdf
asdf
asdf
asdf
asdf
</body>
</html></source>