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>
asdf
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
Click me
</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>
an animated info message
</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>
adsf
</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>
Click me
</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>
asdf
</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>
adsf
</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>
Click me
</body>
</html></source>
