Animate.css懸停

實現，但我想，以確保該「效應在激活：懸停所以我用jQuery的這個

代碼是：

$(".questo").hover(function (e) { 
    $(this).toggleClass('animated shake', e.type === 'mouseenter'); 
});

問題是，一旦你刪除鼠標，'效果被中斷。即使沒有懸停效應，它能夠降低「效應」的效果嗎？

謝謝大家提前

來源

2014-01-17 user3198605

懸停事件是當你進入/離開元素時觸發的，你試圖實現什麼？ –

謝謝您的回答：當我刪除鼠標的效果突然停止時，我想至少完成而不是動作 – user3198605

看到此版本（更多互動）：

$(".myDiv").hover(function(){ 
    $(this).addClass('animated ' + $(this).data('action')); 
}); 
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){ 
    $(this).removeClass('animated ' + $(this).data('action')); 
});

http://jsfiddle.net/DopustimVladimir/Vc2ug/

來源

2014-01-17 11:49:52 DopustimVladimir

你是一個偉大的，這種效果是更好的質量和更有用謝謝 – user3198605

我相信你說的動畫停止一旦鼠標離開，你正在努力實現的，一旦開始懸停會留在動畫。

在這種情況下，您必須將動畫迭代計數設置爲無限。請將

animation-iteration-count:infinite

添加到樣式表中的動畫類。

來源

2014-01-17 09:53:31 Spdexter

或添加一個數字而不是無限的指定次數 – Spdexter

您是否檢查過動畫持續時間：財產 - 看起來像你可能不得不將它改爲2秒或任何你想要實現的。 – Spdexter

感謝您的回覆，我創建了一個jsfiddle來幫助我更好您可以在代碼中編寫它們以便了解和理解'效果？ – user3198605

代替使用toggleClass，通過在懸停中添加類來更改代碼，併爲動畫結束css3掛鉤以完成並移除類。

代碼：

$(".questo").hover(function (e) { 
    $(this).addClass('animated shake'); 
}); 

$(".questo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { 
    $(this).removeClass('animated shake'); 
});

演示：http://jsfiddle.net/IrvinDominin/xxJ7K/1/

來源

2014-01-17 10:06:51

完美.. thx再次！ – user3198605

@ user3198605歡迎您 –

@ user3198605爲什麼你刪除了chackmark？我的解決方案回答你的問題，新接受的答案是別的（並從我的解決方案複製） –

而不是切換懸停類，將它們添加鼠標輸入，這樣

$(".questo").mouseEnter(function(event) { 
    $(this).addClass("animated shake"); 
});

然後你就可以刪除類時動畫結束

$(".questo").on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(event) { 
    $(this).removeClass("animated shake"); 
});

我會用鼠標輸入而不是懸停，因爲當鼠標移出元素時可以觸發動畫。

看到這個jsFiddle爲例

來源

2014-01-17 10:11:37 Martin

假設你要添加的類當鼠標進入和刪除類時，鼠標離開....

你可以試試這個：

$(".questo").hover(function (e) { $(this).addClass('animated shake'); }, function(e){ $(this).removeClass('animated shake'); });

來源

2014-01-17 10:18:21 Vivek

在你的CSS文件，你可以只添加：

.questo:hover { 
    -webkit-animation: shake 1s; 
    animation: shake 1s; 
}

這個解決方案的好處是，它不需要任何的JavaScript。參考看看這個page

來源

2015-07-22 18:30:12

這是偉大的，除了你停止徘徊的那一刻，動畫將被切斷。 –

@MikeLambert你可以通過在'shake'旁邊添加關鍵字'infinite'來使動畫成爲'無限'：'-webkit-animation：shake infinite 1s;動畫：搖動無限1秒;'這樣它就不會被切斷，除非你從房間中移除房屋。 –

回答

相關問題