動畫與回撥

有時我們需要將單詞位置從一個地方更改為另一個地方,或者減少單詞的大小並自動更改單詞的顏色以提高我們網站或網路應用程式的吸引力。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>");
     }
  });