jQuery动画animate

.animate( style, time, easing, callBackFn): 给绑定的元素执行相对应的css动画；

style:要执行css的动画样式；必选

time：执行的时间（从开始到结束的时间）；可选

easing：动画以什么样的方式执行（慢----slow、快----fast、匀速-----linear、先快后慢 ··· ）；可选

callBackFn：动画执行完后的回调函数。可选

eg：每50毫秒div的top和left值加5像素，元素会不断向右下角移动（注意：要使元素移动的话，必须要设置相对定位或绝对定位或固定定位）

<stlye>
 .wrapper{
        width:60px;
        height:60px;
        position: absolute;
        top: 50px;
        left: 0px;
        background-color: #000;
  }
</style>
<div class="wrapper"></div>
<script>
   setInterval(function(){
       $(".wrapper").animate({
            top:"+=5px",
            left:"+=5px",
       },100)
   },50)
</script>

关于使用animate几个注意点：

1、要想让元素移动，必须给元素添加定位才行；

2、像素单位px不写也可以，jq内部会帮我们加上；

3、当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left；

网上有很多关于easing的动画库，如jQuery Easing Plugin，引入之后直接用即可。