Animate.css в парении

Question

Сегодня я пытался реализовать на моем сайте animate.css

Но я хотел, чтобы убедиться, что «эффект активируется в: парить Так что я использовал JQuery для этого

Кодекса is:

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

Проблема в том, что как только вы удалите мышь, эффект будет прерван. Он может нанести «эффект» даже без эффекта зависания, как только он начнется?

Спасибо всем заранее

Answer 1

Смотрите этот вариант (более интерактивный):

$(".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/

Answer 2

Я считаю, что вы говорите, анимация останавливается, как только листья мыши, и вы пытаетесь достичь анимации, которая когда-то начали по наведению бы остаться.

В этом случае вы должны установить счетчик итераций анимации в бесконечность. Пожалуйста, добавьте

animation-iteration-count:infinite 

к классу анимации в таблице стилей.

Answer 3

Вместо того, чтобы использовать 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/

Answer 4

Вместо того, чтобы переключать классы по наведению, добавить их на мыши войти, как этот

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

Затем вы можете удалить классы, когда завершение анимации

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

Я бы сделал это на мыши, а не наведите курсор мыши, потому что вы можете вызвать анимацию, когда мышь выйдет из элемента.

Смотрите это jsFiddle для примера

Answer 5

Предполагая, что вы хотите добавить класс, когда мышь ввести и удалить класс, когда мышь оставить ....

Вы можете попробовать это:

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

Answer 6

В файле CSS вы можете просто добавить:

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

Прелесть этого решения заключается в том, что она не требует JavaScript.Для справки посмотрите на это page