使用 jQuery 偵測 CSS3 轉換和動畫的完成
在 Web 開發中，通常需要在 CSS 轉換或動畫已經完成。然而，確定這些動畫的確切結束可能很棘手。本文將示範如何使用 jQuery 偵測過渡和動畫的完成，確保對 DOM 操作的精確控制。
Transitions
偵測動畫的結束透過jQuery 進行CSS 轉換，使用以下語法：
$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });這將事件處理程序綁定到指定元素，該元素在以下情況下觸發發生任何受支援的過渡結束事件。
動畫
對於CSS 動畫，使用類似的方法：
$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });確保一次性觸發🎜>
確保一次觸發🎜>
$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });確保一次性觸發🎜>為了防止事件處理程序多次執行，使用jQuery 的.one() 方法。這可確保處理程序僅觸發一次，之後會自動刪除：
$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function(e){
// do something here
$(this).off(e);
}
);請注意，.bind() 方法已被棄用在jQuery 1.7 中。使用 .on() 代替：
此等效程式碼使用 .off() 來有效模仿 .one() 的行為。以上是jQuery 如何偵測 CSS3 轉換和動畫的完成？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
