Animate.css в режиме hover

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

Но я хотел убедиться, что эффект активирован в: hover Поэтому я использовал jquery для этого

Код:

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

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

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

Ответ 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/

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

Ответ 5

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

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

 animation-iteration-count:infinite

для класса анимации в вашей таблице стилей.

Ответ 6

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

Вы можете попробовать следующее:

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