防止在當前動畫運行時跳轉到下一個動畫的開始

Question

我是動畫的一個帶有jquerys mouseover/mouseout事件的dom對象。 這工作正常，除非鼠標在前一個動畫運行時進入/退出。 然後跳轉到下一個看起來很醜的動畫的開始。

這怎麼能避免？

$("#leftlogo").on("mouseover", function(t) { 
    $(t.target).css("animation-name", "left-over"); 
}).on("mouseout", function(t) { 
    $(t.target).css("animation-name", "left-out"); 
}); 

Answer 1

CSS3動畫事件： http://www.sitepoint.com/css3-animation-javascript-event-handlers/

而不是鏈接jQuery的電話時，可使用1個。對（）處理多個活動，包括CSS3 animationend事件。

//set boolean when animating 
    var isAnimating = false; 

    $("#leftlogo").on({ 
    //handle mouseover 
    "mouseover": function(t) { 
    $(t.target).css("animation-name", "left-over"); 
    isAnimating = true; 
    }, 
    //handle animationend event 
    "animationend": function(e) { 
     if (e.animationName == "animation-name")  
     { isAnimating = false; } 
    }, 
    //handle mouseout 
    "mouseout": function(t) { 
    while (isAnimating != false) 
     { 
     //hang on a sec 
     }; 

     $(t.target).css("animation-name", "left-out"); 
    }); 

請注意，這尚未經過測試 - 您可能需要播放w /條件。

此處未反映的是使用.addClass（）和.removeClass（）而不是.css（）更好的做法。這使得您的樣式定義只保留JS中的邏輯。

Answer 2

我的建議是爲了避免與毛茸茸CSS3動畫事件理順關鍵幀動畫並使用transition代替。我知道你在問什麼，但我正在給這個替代方案，可能爲你節省一杯代碼，而你可能只需要一茶匙。幾年後，它可能會更乾淨。

http://jsbin.com/kabep/2/edit?html,css,output

#leftlogo { 
    transition: all 1s; 
    background: pink; 
} 

#leftlogo:hover{ 
    background: yellow; 
}