用animate()函数做动画效果

值得提起注意的是，这篇博客其实是为了充字数，给那些前端新手写的，所以大佬们请先移步去看别的article

前言引入
animate()函数在我看来，实质上是对JS进行CSS修改操作的简化，animate()支持所有css属性的修改。机制是：
由当前的CSS属性变化到你animate()内规定的属性。

然后接下来就是关于使用的介绍了：

$(selector).animate({params},speed,callback)
params 参数定义形成动画的 CSS 属性,即你想实现的修改后的CSS属性
speed(可填可不填) 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
callback(可填可不填) 参数是动画完成后所执行的函数名称。

举个实例:

效果演示

vocanic

<div>
<h3>效果演示</h3>
<br>
<script src="jquery.js"></script>
<script> 
$(document).ready(function(){
  $("button#bDemo").click(function(){
    $("div#divDemo").animate({left:"170px",opacity:"0.5"},"slow");
    $("div#divDemo").animate({fontSize:"5em"},"slow");
  });
});
</script>
<button id="bDemo">开始动画</button><br><br>
<div id="divDemo" style="background:#98bf21;height:100px;width:210px;
position:relative;">vocanic</div>
</div>

值得注意的是:animate()函数可以先后顺序使用，从而造成更加神奇的视觉效果。
这种先后顺序又被称作为队列
还有就是jQuery库的show()，hide()和toggle()也是被支持放入animate({})内的

使用jQuery的animate()制作自定义动画

用animate()函数做动画效果

效果演示