Jquery - 在CSS動畫上應用樣式End

如何使用jQuery來確定元素的CSS動畫何時結束，然後將新樣式應用於該元素？下面是我的非功能性代碼。Jquery - 在CSS動畫上應用樣式End

$("#icon").jQuery.Event("webkitAnimationEnd", function(event){ 
    ('#icon').css('opacity', '1'); 
});

來源

2011-06-05 Tim

您是否試圖在全球範圍內應用此功能，而無需將其分配給單個動畫？ – Fosco 2011-06-05 00:54:07

我實際上需要將它分配給單個動畫：/ – Tim 2011-06-09 21:39:08

我覺得其實你正在尋找的是.bind（）方法：

$("#icon").addClass('thisClassWillApplyMyCSSAnimation').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e){ 
    //DO WHATEV 
    $('#icon').css('opacity', '1'); 
});

來源

2012-05-11 15:58:37

如果我明白你的意思，你想要動畫一個CSS屬性，並定義一個回調來執行動畫結束。你應該使用.animate（）函數。

例如：

$('#clickme').click(function() { 
    $('#book').animate({ 
    opacity: 0.25, 
    }, 5000, function() { 
    // Animation complete. 
    }); 
});

下面的腳本將從其當前值的不透明度動畫到0.25。這將花費5000毫秒。最後一個函數將在動畫完成後調用。

這裏JQuery的頁面有關：

JQuery的偉大:)

來源

2011-06-05 00:52:31 Arnaud

謝謝，但問題是我已經在使用CSS3處理動畫，我只想讓jQuery知道何時完成。這似乎沒有必要，但我真的需要使用CSS來做動畫:) – Tim 2011-06-05 03:57:35

您好，只需使用jquery動畫方法而不是CSS動畫，這樣它的跨瀏覽器兼容，並且您可以使用上面的回調方法。 – addedlovely 2011-06-05 17:10:49

是的，除了jQuery在移動設備上的速度很慢。我同意發佈這個的人，我們需要知道如何添加一個樣式的東西，一旦webkit動畫已經完成... – Alex 2011-07-08 15:26:41

-1

大部分（如果不是全部）動畫定義一個回調一次活動已經完成。

例如，假設你想了slideDown（）的#MyDiv對象，一旦這就是完整的，改變#icon的不透明度：

$("#MyDiv").slideDown("[speed]", function() 
{ 
    $("#icon").css("opacity", "1"); 
}); 

// [speed] = "slow", "normal", "fast" or a integer value defining milliseconds

我沒有測試過這一點，但它應該工作。 ..

來源

2011-06-05 00:57:43

留在話題上，回答他的問題。這是完全錯誤的，因爲你沒有解決jQuery如何討論webkit動畫事件的主題。 – Alex 2011-07-08 15:28:23

您可以使用one()

$("#icon").one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) { 
    //Your css 
    $('#icon').css('opacity', '1'); 
});

來源

2014-01-16 14:36:04 Ouadie

Jquery - 在CSS動畫上應用樣式End

回答

相關問題