jQuery中animate（）动画效果的实现

 

$(function () {

     $("#box").animate({top:500,left:400},3000).delay(2000);

//花3秒的时间从初始位置漂移到指定位置

     $("#box").animate({top:0,left:800},3000);
//延迟两秒后又花3秒的时间从漂移到第二个指定位置

$("#box").animate({height:400,width:400,top:100,left:200},3000);

animate中的height 和width属性代表动画的过程中高宽会变成所设置的值，
top和left代表动画最终的位置离顶部100px，离左边200px

 })

注意：

/*  #box{
 border: #ff1708 solid 1px;width: 200px;height: 200px;position: absolute;

 //必须给box指定position: absolute;或者pisiton：relative
 //如果不指定那么动画效果只会对height和width有效，对top button left right 都不会有效
 //如果指定的是absolute，那么动画效果会相对于其父级进行变化，若没有父级，则相对于body进行变化
 //如果指定的是relative，那么动画效果会相对于自身进行变化

 }*/