JavaScript DHTML/jQuery/Animation
Содержание
- 1 Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
- 2 Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
- 3 Animate width and height
- 4 Animation: border width
- 5 Animation call back
- 6 Animation: easing in
- 7 Animation: font size
- 8 Animation: height
- 9 Animation in sequence
- 10 Animation: movement
- 11 Animation: opacity
- 12 Animation queue
- 13 Animation: show
- 14 Animation: toggle
- 15 Cascade animation
- 16 Cascade fade out animation
- 17 dequeue(): Removes a queued function and executes it.
- 18 jQuery animation: resize and change color
- 19 Linear animation
- 20 queue(callback): Adds a new function, to be executed, onto the end of the queue of all matched elements.
- 21 queue() Returns a reference to the first element"s queue (which is an array of functions).
- 22 Show the length of the queue.
- 23 Stop an animation
- 24 Use dequeue to end a custom queue function which allows the queue to keep going.
- 25 Width animation
- 26 Width changing animation
Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
<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>
<p>
fade away.
</p>
</body>
</html>
Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.
<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>
<p><span>asdf</span></p>
</body>
</html>
Animate width and height
<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>
<div>asdf</div>
</body>
</html>
Animation: border width
<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>
<div>Click me</div>
</body>
</html>
Animation call back
<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>
<div>Click me</div>
</body>
</html>
Animation: easing in
<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>
<div>Click me</div>
</body>
</html>
Animation: font size
<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>
<div>Click me</div>
</body>
</html>
Animation: height
<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>
<div>Click me</div>
</body>
</html>
Animation in sequence
<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>
<div>Click me</div>
</body>
</html>
Animation: movement
<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>
<div>Click me</div>
</body>
</html>
Animation: opacity
<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>
<div>Click me</div>
</body>
</html>
Animation queue
<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>
<div>Click me</div>
</body>
</html>
Animation: show
<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>
<div>Click me</div>
</body>
</html>
Animation: toggle
<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>
<div>Click me</div>
</body>
</html>
Cascade animation
<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>
<div>Click me</div>
</body>
</html>
Cascade fade out animation
<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>
<div style="" id="info">an animated info message</div>
</body>
</html>
dequeue(): Removes a queued function and executes it.
<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>
<div>adsf</div>
</body>
</html>
jQuery animation: resize and change color
<!--
jQuery UI Effects Blind 1.7.2
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)
Dual licensed under the MIT (MIT-LICENSE.txt)
and GPL (GPL-LICENSE.txt) licenses.
http://docs.jquery.ru/UI/Effects/Blind
-->
<!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>
<div class="demo">
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
</div><!-- End demo -->
<div class="demo-description">
<p>Click the button above to preview the effect.</p>
</div><!-- End demo-description -->
</body>
</html>
Linear animation
<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>
<div>Click me</div>
</body>
</html>
queue(callback): Adds a new function, to be executed, onto the end of the queue of all matched elements.
<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...
<div></div>
</body>
</html>
queue() Returns a reference to the first element"s queue (which is an array of functions).
<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>
<span></span>
<div></div>
</body>
</html>
Show the length of the queue.
<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>
<span></span>
<div></div>
</body>
</html>
Stop an animation
<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>
<div>asdf</div>
</body>
</html>
Use dequeue to end a custom queue function which allows the queue to keep going.
<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>
<div>adsf</div>
</body>
</html>
Width animation
<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>
<div id="myDialog">
<p>
Dialog
</p>
<div id="tmpButtons">
<input type="submit" id="tmpAnimate" value="Animate Dialogue" />
</div>
</div>
</body>
</html>
Width changing animation
<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>
<div>Click me</div>
</body>
</html>