JavaScript Tutorial/jQuery/Animation
Содержание
- 1 30. Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
- 2 30. Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
- 3 30. Animate width and height
- 4 30. Animation: border width
- 5 30. Animation call back
- 6 30. Animation: easing in
- 7 30. Animation: font size
- 8 30. Animation: height
- 9 30. Animation in sequence
- 10 30. Animation: movement
- 11 30. Animation: opacity
- 12 30. Animation queue
- 13 30. Animation: show
- 14 30. Animation: toggle
- 15 30. Cascade animation
- 16 30. Cascade fade out animation
- 17 30. dequeue(): Removes a queued function and executes it.
- 18 30. jQuery animation: resize and change color
- 19 30. Linear animation
- 20 30. queue(callback): Adds a new function, to be executed, onto the end of the queue of all matched elements.
- 21 30. queue() Returns a reference to the first element"s queue (which is an array of functions).
- 22 30. Show the length of the queue.
- 23 30. Stop an animation
- 24 30. Use dequeue to end a custom queue function which allows the queue to keep going.
- 25 30. Width animation
- 26 30. Width changing animation
30. Animates all paragraphs to fade out, completing the animation within 600 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").fadeOut("slow"); });
}); </script> </head> <body> <body>
fade away.
</body>
</html></source>
30. Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 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:first").click(function () { $(this).fadeTo("slow", 0.33); }); }); </script> </head> <body> <body>
asdf
</body>
</html></source>
30. Animate width and height
<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").each(function(){ $(this).animate( { width: $(this).width() * 2, height: $(this).height() * 2 }, 2000 ); });
}); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body>
</body>
</html></source>
30. Animation: border width
<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").animate({ borderWidth: "100px" }, 1500 ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation call back
<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").animate({height:200, width:400, opacity: .5}, 1000, "linear", function(){alert("all done");} ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: easing in
<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").animate({height:200, width:400, opacity: .5,"easing": "easein",}, 1000, "linear", function(){alert("all done");} ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: font size
<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").animate({ fontSize: "10em", }, 1500 ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: height
<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").animate({ height: "20%", }, 1500 ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation in sequence
<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").animate({"left": "+=50px"}, "slow"); }); }); </script> <style> div { position:absolute; background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: movement
<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").animate({ marginLeft: "0.6in", }, 1500 ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: opacity
<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").animate({ opacity: 0.4, }, 1500 ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation queue
<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").animate( { width:"90%" }, { queue:true, duration:3000 } ) .animate( { fontSize:"24px" }, 1500 ) .animate( { borderRightWidth:"15px" }, 1500); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: show
<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").animate({"left": "+=50px"}, "slow"); }); }); </script> <style> div { position:absolute; background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Animation: toggle
<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").animate({ "height": "toggle", "opacity": "toggle"}, { duration: "slow" });
}); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Cascade 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(){ $("div").animate( { width:"90%" }, { queue:false, duration:3000 } ) .animate( { fontSize:"24px" }, 1500 ) .animate( { borderRightWidth:"15px" }, 1500); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. Cascade fade out 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(){ $("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400); }); </script> </head> <body>
</body>
</html></source>
30. dequeue(): Removes a queued function and executes it.
<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 () { $("div").animate({left:"+=210px"}, 2000); $("div").animate({top:"1000px"}, 1200); $("div").animate({top:"10px"}, 1200); $("div").animate({top:"1000px"}, 1200); $("div").queue(function () { $(this).toggleClass("red"); $(this).dequeue(); }); $("div").animate({left:"120px", top:"30px"}, 700); }); }); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body> <button>Start</button>
</body>
</html></source>
30. jQuery animation: resize and change color
<source lang="javascript">
<!doctype html> <html lang="en"> <head>
<title>jQuery UI Effects - Animate Demo</title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/effects.core.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <style type="text/css"> .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } </style> <script type="text/javascript"> $(function() { $("#button").toggle( function() { $("#effect").animate({backgroundColor: "#aa0000", color: "#fff", width: 500}, 1000); }, function() { $("#effect").animate({backgroundColor: "#fff", color: "#000", width: 240}, 1000); } ); }); </script>
</head> <body>
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
Click the button above to preview the effect.
</body> </html></source>
30. Linear 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(){ $("div").animate({height:200, width:400, opacity: .5}, 1000, "linear", function(){alert("all done");} ); }); </script> <style> div { background-color:red; width:500px; height:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>
30. queue(callback): Adds a new function, to be executed, onto the end of the queue of all matched elements.
<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 () { $("div").show("slow"); $("div").animate({left:"+=20"},2000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:"-=20"},500); $("div").slideUp(); });
}); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body> Click here...
</body>
</html></source>
30. queue() Returns a reference to the first element"s queue (which is an array of functions).
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:"+=20"},2000); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt(); }); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body> <button id="show">Show Length of Queue</button>
</body>
</html></source>
30. Show the length of the queue.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#show").click(function () { var n = $("div").queue("fx"); $("span").text("Queue length is: " + n.length); }); function runIt() { $("div").show("slow"); $("div").animate({left:"+=20"},2000); $("div").hide("slow"); $("div").show(1200); $("div").slideUp("normal", runIt); } runIt(); }); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body> <button id="show">Show Length of Queue</button>
</body>
</html></source>
30. Stop an 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(){ $("#go").click(function(){ $("div").animate({left: "+=1000px"}, 20000); }); $("#stop").click(function(){ $("div").stop(); }); }); </script> <style> div { position: absolute; } </style> </head> <body> <body> <button id="go">Go</button> <button id="stop">STOP!</button>
</body>
</html></source>
30. Use dequeue to end a custom queue function which allows the queue to keep going.
<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 () { $("div").animate({left:"+=210px"}, 2000); $("div").animate({top:"1000px"}, 1200); $("div").animate({top:"10px"}, 1200); $("div").animate({top:"1000px"}, 1200); $("div").queue(function () { $(this).toggleClass("red"); $(this).dequeue(); }); $("div").animate({left:"120px", top:"30px"}, 700); }); }); </script>
<style>
div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; }
</style>
</head> <body> <body> <button>Start</button>
</body>
</html></source>
30. Width 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() { $("input#tmpAnimate").click( function($e) { $("div#myDialog").animate({ width: "600px", marginLeft: "-300px" }, 3000 ); } ); }
);
</script> <style type="text/css">
div#myDialog {
position: absolute; top: 50%; left: 50%; width: 500px; height: 200px; margin: -100px 0 0 -200px; border: 1px solid rgb(128, 128, 128);
} div#tmpButtons {
position: absolute; bottom: 5px; right: 5px;
}
</style> </head> <body>
Dialog
<input type="submit" id="tmpAnimate" value="Animate Dialogue" />
</body>
</html></source>
30. Width changing 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(){ $("div").animate({ width: "70%", }, 1500 ); }); </script> <style> div { background-color:red; width:500px; border:1px solid black; } </style> </head> <body> <body>
</body>
</html></source>