动画与回调

有时我们需要将单词位置从一个地方更改为另一个地方，或者减少单词的大小并自动更改单词的颜色以提高我们网站或网络应用程序的吸引力。JQuery 使用 fadeIn(), hide(), slideDown() 对这个概念有很大帮助，但它的功能有限，只能完成分配给它的特定任务。

Jquery 通过提供一种名为 .animate() 的神奇而灵活的方法来解决这个问题。此方法允许设置自定义动画，该动画使用 css 属性，这些属性允许飞越边界。例如，如果我们将 css 样式属性设置为 width:200; 并且 DOM 元素的当前位置为 50，则 animate 方法从给定的 css 值减小当前位置值并将该元素设置为 150.但是我们不需要为此部分烦恼，因为动画引擎会处理它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").animate({width: "200px"});
    });
</script>

<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

在 .animate() 方法中允许的 css 样式属性列表

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent, 

.animate() 方法中指定的速度

milliseconds (Ex: 100, 1000, 5000, etc.), 
"slow", 
"fast"

在 .animate() 方法中指定的缓动

以下是一些复杂动画选项的示例。

例如 1：

$( "#book" ).animate({
  width: [ "toggle", "swing" ],
  height: [ "toggle", "swing" ],
  opacity: "toggle"
 }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
});

例 2：

  $("#box").animate({
     height: "300px",
     width: "300px"
     }, {
     duration: 5000,
     easing: "linear",
     complete: function(){
        $(this).after("<p>Animation is complete!</p>");
     }
  });