jQuery动画.animate()方法简单实例

 jquery动画现在比较流行,比如点击一个页面后。每个div内容单独动画形式移动下来。或者出现,下面是我写的简单的代码

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

$(function(){

 

var dice = $("#dice");

var shang10=$("#shang10");

var shang11=$("#shang11");

var shang12=$("#shang12");

var shang13=$("#shang13");

 

shang10.animate({top: "100px",left: "400px"})//下移动,可以添加移动时间参数,100

.delay(800).animate({top: "200px",left: "200px"})//到时间重新移动动画

 

shang11.animate({top: "200px",left: "500px"})

.delay(800).animate({top: "300px",left: "500px"})//到时间重新移动动画

 

shang12.animate({top: "500px",left: "600px"})

.delay(800).animate({top: "300px",left: "500px"})//到时间重新移动动画

 

shang13.animate({top: "600px",left: "200px"})

.delay(800).animate({top: "300px",left: "600px"})//到时间重新移动动画

 

 

});

</script>

 

<div id="shang10" style="position: absolute; height: 55px; width:50px;top:-70px;left:300px;background-color:#ee0000;"><h1><a href="">s</a></h1></div>

<div id="shang11"  style="position: absolute; height: 55px; width:50px;top:-70px;left:400px; background-color:#FFf000;">网站制作</div>

<div id="shang12" style="position: absolute; height:55px; width:50px;top:-70px;left:500px; background-color:#000000;">sfhdskjf</div>

<div id="shang13" style="position: absolute; height: 55px; width:50px;top:-70px;left:600px;background-color:#F00000;">sfhdskjf</div>