jquery如何寫動畫

jQuery 是一個功能強大的 JavaScript 函式庫，它能夠大量地簡化開發者和設計師的工作。其中，Jquery的動畫效果更是成為了設計中最重要的元素之一。本文就將介紹如何使用 jQuery 來創造動畫效果。

一、jQuery動畫效果

jQuery 的動畫效果一般使用 animate() 函數來實作。它允許程式設計師在一個或多個 CSS 屬性上創建過渡動畫。 animate() 函數需要至少兩個參數：要變更的 CSS 屬性和變化的時間，可以選擇第三個參數來指定完成後執行的函數。

下面的範例將示範如何更改元素的CSS 屬性，從而創建一個動畫效果：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px', opacity: '0.5'}, 2000);
  });
});

上面的例子中，當button 被點擊時，div 元素將以2000 毫秒的速度移動到左邊250 像素的距離並且透明度變成0.5。

二、jQuery的animate()函數

jQuery 的 animate() 函數可輸入多個參數，包括 CSS 屬性、變化持續時間、函數。

下面的範例將示範如何使用animate() 函數來同時變更多個CSS屬性：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate(
      {
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      },
      2000
    );
  });
});

在上面的範例中，我們同時變更了元素的位置、透明度、高度和寬度。這些變化將在 2000 毫秒的持續時間內完成。

三、jQuery的速度參數

jQuery 提供三個預設速度參數：slow、normal 和 fast。我們也可以使用數字來指定速度值。數字越大表示動畫執行的越快。下面的範例示範如何使用速度參數：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'}, "slow");
    $("div").animate({opacity: '0.5'}, "normal");
    $("div").animate({height: '150px', width: '150px'}, "fast");
  });
});

上面的範例將元素分別在緩慢、正常和快速的速度下顯示動畫效果。

四、jQuery的回呼函數

在呼叫 animate() 函數時，我們可以傳遞一個回呼函數給它。回呼函數將在 animate() 函數執行完成後立即呼叫。

下面的範例示範如何使用回呼函數：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5'
    }, 2000, function() {
      alert("动画执行完毕!");
    });
  });
});

上面的範例在 animate() 函數執行完成後，呼叫了一個 alert() 函數。

五、jQuery的佇列

jQuery 使用佇列來儲存要執行的所有函數。當我們使用 animate() 函數時，該函數實際上會將一個函數新增至佇列。隊列按照先進先出的原則運作。因此，如果我們想在動畫完成後執行一些其他任務，則必須使用佇列。

下面的範例示範如何使用佇列來指定多個動畫：

$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '250px'}, 2000);
    div.animate({top: '250px'}, 2000);
    div.animate({left: '0px'}, 2000);
    div.animate({top: '0px'}, 2000);
  });
});

上面的範例將元素移到右上角，然後回到原始位置。

六、jQuery的清空佇列

如果要在動畫正在執行時清空佇列，則必須使用 clearQueue() 函數。它將從正在運行的動畫中刪除後續要執行的所有函數。

下面的範例示範如何清空佇列：

$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({left: '500px'}, 5000);
     $("div").animate({opacity: '0.0'}, 3000);
     $("div").animate({top: '200px'}, 5000);
     $("div").clearQueue();
   });
});

上面的範例將移動到中間時，清空了佇列，即不再執行下一個動畫。

七、jQuery的停止動畫

如果要停止一個正在運行的動畫，可以使用 stop() 函數。例如，如果我們想在按下一個停止按鈕時停止上面的動畫，則可以這樣使用：

$("button").click(function(){
  $("div").stop();
});

八、綜合應用

下面的例子演示瞭如何使用滑鼠懸停和滑鼠移除事件來啟動和停止動畫：

$(document).ready(function(){
  $("div").hover(function(){
    $(this).animate({left: '250px'});
  },
    function(){
    $(this).animate({left: '0px'});
  });
});

上面的範例將在滑鼠懸停時將元素向右移動250 像素，並在滑鼠移開時返回原始位置。

九、總結

jQuery 的 animate() 函數讓創造動畫效果變得十分容易。無論是基本動畫、多個動畫或回呼函數都能夠輕鬆實現，只需要了解 jQuery 的基本操作和語法。

在進行動畫設計時，我們需要根據網站或應用程式的需求來判斷使用何種動畫效果。我們可以在動畫開始時加入適當的速度參數，從而為使用者提供順暢的使用者體驗。在動畫執行期間，可以使用回呼函數和佇列來執行其他任何操作。在任何時候，都可以使用 stop()、clearQueue() 函數來停止或清空佇列中的動畫。

最後，JQuery 的動畫功能是設計者必備的技巧，更是實現網頁動畫效果的利器，希望這篇文章能幫助大家更好地理解並應用jQuery中的動畫特效。

以上是jquery如何寫動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！