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，那么动画效果会相对于自身进行变化

 }*/