JavaScript Tutorial/jQuery/slideUp — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:25, 26 мая 2010
Содержание
- 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.
<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!
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
30. Animates all form controls to slide up
<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" />
<div id="msg"></div>
</body>
</html>
30. Click to slide up
<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>
<p>asdf</p>
<p>asdf</p>
</body>
</html>
30. Slide up a DIV tag
<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>
<div>Click me</div>
</body>
</html>
30. Slide up callback
<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>
<div>Click me<button>button</button></div>
</body>
</html>
30. Slide up fast
<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>
<div>Click me</div>
</body>
</html>
30. Slide up form controls
<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>
<div>Click me<button>button</button></div>
</body>
</html>
30. Slide up in milliseconds
<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>
<div>Click me</div>
</body>
</html>
30. Slide up slowly
<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>
<div>Click me</div>
</body>
</html>
30. slideUp(speed, callback): Only the height is adjusted for this animation
<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!
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>