http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2FAnimation
JavaScript DHTML/jQuery/Animation - История изменений
2026-04-04T04:40:35Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Animation&diff=3084&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Animation&diff=3085&oldid=prev
Admin: 1 версия
2010-05-26T07:24:13Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Animates all paragraphs to fade out, completing the animation within 600 milliseconds.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("p").click(function () {<br />
$("p").fadeOut("slow");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p><br />
fade away.<br />
</p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("p:first").click(function () {<br />
$(this).fadeTo("slow", 0.33);<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p><span>asdf</span></p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animate width and height==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").each(function(){<br />
$(this).animate(<br />
{<br />
width: $(this).width() * 2,<br />
height: $(this).height() * 2<br />
},<br />
2000<br />
);<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: border width==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({ <br />
borderWidth: "100px"<br />
}, 1500 );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation call back==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({height:200, width:400, opacity: .5}, 1000, "linear", function(){alert("all done");} );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: easing in==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({height:200, width:400, opacity: .5,"easing": "easein",}, 1000, "linear", function(){alert("all done");} );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: font size==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({ <br />
fontSize: "10em", <br />
}, 1500 );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: height==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({ <br />
height: "20%",<br />
}, 1500 );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation in sequence==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("div").click(function(){<br />
$("div").animate({"left": "+=50px"}, "slow");<br />
});<br />
});<br />
</script><br />
<style><br />
div { <br />
position:absolute; <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: movement==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({ <br />
marginLeft: "0.6in",<br />
}, 1500 );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: opacity==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({ <br />
opacity: 0.4,<br />
}, 1500 );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation queue==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate( { width:"90%" }, { queue:true, duration:3000 } )<br />
.animate( { fontSize:"24px" }, 1500 )<br />
.animate( { borderRightWidth:"15px" }, 1500);<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: show==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("div").click(function(){<br />
$("div").animate({"left": "+=50px"}, "slow");<br />
});<br />
});<br />
</script><br />
<style><br />
div { <br />
position:absolute; <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Animation: toggle==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({<br />
"height": "toggle", "opacity": "toggle"}, { duration: "slow" });<br />
<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Cascade animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate( { width:"90%" }, { queue:false, duration:3000 } )<br />
.animate( { fontSize:"24px" }, 1500 )<br />
.animate( { borderRightWidth:"15px" }, 1500);<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Cascade fade out animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);<br />
});<br />
<br />
<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="" id="info">an animated info message</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==dequeue(): Removes a queued function and executes it.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("button").click(function () {<br />
$("div").animate({left:"+=210px"}, 2000);<br />
$("div").animate({top:"1000px"}, 1200);<br />
$("div").animate({top:"10px"}, 1200); <br />
$("div").animate({top:"1000px"}, 1200); <br />
$("div").queue(function () {<br />
$(this).toggleClass("red");<br />
$(this).dequeue();<br />
});<br />
$("div").animate({left:"120px", top:"30px"}, 700);<br />
});<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<button>Start</button><br />
<div>adsf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==jQuery animation: resize and change color==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Effects - Animate Demo</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/effects.core.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<style type="text/css"><br />
.toggler { width: 500px; height: 200px; position: relative;}<br />
#button { padding: .5em 1em; text-decoration: none; }<br />
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }<br />
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }<br />
</style><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#button").toggle(<br />
function() {<br />
$("#effect").animate({backgroundColor: "#aa0000", color: "#fff", width: 500}, 1000);<br />
},<br />
function() {<br />
$("#effect").animate({backgroundColor: "#fff", color: "#000", width: 240}, 1000);<br />
}<br />
);<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<div class="toggler"><br />
<div id="effect" class="ui-widget-content ui-corner-all"><br />
<h3 class="ui-widget-header ui-corner-all">Animate</h3><br />
<p><br />
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.<br />
</p><br />
</div><br />
</div><br />
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Click the button above to preview the effect.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Linear animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({height:200, width:400, opacity: .5}, 1000, "linear", function(){alert("all done");} );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
height:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==queue(callback): Adds a new function, to be executed, onto the end of the queue of all matched elements.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(document.body).click(function () {<br />
$("div").show("slow");<br />
$("div").animate({left:"+=20"},2000);<br />
$("div").queue(function () {<br />
$(this).addClass("newcolor");<br />
$(this).dequeue();<br />
});<br />
$("div").animate({left:"-=20"},500);<br />
$("div").slideUp();<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
Click here...<br />
<div></div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==queue() Returns a reference to the first element"s queue (which is an array of functions).==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#show").click(function () {<br />
var n = $("div").queue("fx");<br />
$("span").text("Queue length is: " + n.length);<br />
});<br />
function runIt() {<br />
$("div").show("slow");<br />
$("div").animate({left:"+=20"},2000);<br />
$("div").hide("slow");<br />
$("div").show(1200);<br />
$("div").slideUp("normal", runIt);<br />
}<br />
runIt();<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<button id="show">Show Length of Queue</button><br />
<span></span><br />
<br />
<div></div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Show the length of the queue.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("#show").click(function () {<br />
var n = $("div").queue("fx");<br />
$("span").text("Queue length is: " + n.length);<br />
});<br />
function runIt() {<br />
$("div").show("slow");<br />
$("div").animate({left:"+=20"},2000);<br />
$("div").hide("slow");<br />
$("div").show(1200);<br />
$("div").slideUp("normal", runIt);<br />
}<br />
runIt();<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<button id="show">Show Length of Queue</button><br />
<span></span><br />
<br />
<div></div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Stop an animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("#go").click(function(){<br />
$("div").animate({left: "+=1000px"}, 20000);<br />
});<br />
<br />
$("#stop").click(function(){<br />
$("div").stop();<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div { <br />
position: absolute; <br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<button id="go">Go</button> <br />
<button id="stop">STOP!</button><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use dequeue to end a custom queue function which allows the queue to keep going.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("button").click(function () {<br />
$("div").animate({left:"+=210px"}, 2000);<br />
$("div").animate({top:"1000px"}, 1200);<br />
$("div").animate({top:"10px"}, 1200); <br />
$("div").animate({top:"1000px"}, 1200); <br />
$("div").queue(function () {<br />
$(this).toggleClass("red");<br />
$(this).dequeue();<br />
});<br />
$("div").animate({left:"120px", top:"30px"}, 700);<br />
});<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<button>Start</button><br />
<div>adsf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Width animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpAnimate").click(<br />
function($e) {<br />
$("div#myDialog").animate({<br />
width: "600px",<br />
marginLeft: "-300px"<br />
}, 3000<br />
);<br />
}<br />
);<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
div#myDialog {<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
width: 500px;<br />
height: 200px;<br />
margin: -100px 0 0 -200px; <br />
border: 1px solid rgb(128, 128, 128);<br />
}<br />
div#tmpButtons {<br />
position: absolute;<br />
bottom: 5px;<br />
right: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="myDialog"><br />
<p><br />
Dialog<br />
</p><br />
<div id="tmpButtons"><br />
<input type="submit" id="tmpAnimate" value="Animate Dialogue" /><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Width changing animation==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").animate({ <br />
width: "70%",<br />
}, 1500 );<br />
});<br />
</script><br />
<style><br />
div { <br />
background-color:red; <br />
width:500px; <br />
border:1px solid black;<br />
}<br />
</style><br />
<br />
</head><br />
<body><br />
<body><br />
<div>Click me</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source></div>
Admin