Управление анимацией CSS с использованием JQuery

Question

Моя анимация работает, когда запускается :hover. Вместо этого я хотел бы инициировать анимацию нажатием кнопки, но я не знаю, как взаимодействовать с CSS от JQuery?

//CSS 

.mouth{ 
    top: 268px; 
    left: 273px; 
    position: relative; 
} 

.frame:hover .mouth { 
    animation-name: talk; 
    animation-duration: 0.75s; 
    animation-iteration-count: 5; 
} 

@keyframes talk { 
    0%, 100%{ 
    top: 268px; 
    left: 273px; 
    } 

    50% { 
    top: 308px; 
    left: 273px; 
    } 
} 

//JQuery 

    $('#getQuote').click(function() { 

    }); 

Answer 1

Добавить класс для запуска анимации, но слушать animationend события, чтобы удалить добавленный класс, так что анимация может быть запущена снова.

$('#getQuote').click(function() { 
 
    $('.mouth').addClass('animate'); 
 
}); 
 
$('.mouth').one('animationend', function(ev) { 
 
    $('.mouth').removeClass('animate'); 
 
});

.mouth{ 
 
    top: 268px; 
 
    left: 273px; 
 
    position: relative; 
 
    
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 

 
.mouth.animate { 
 
    animation-name: talk; 
 
    animation-duration: 0.75s; 
 
    animation-iteration-count: 5; 
 
} 
 

 
@keyframes talk { 
 
    0%, 100%{ 
 
    top: 268px; 
 
    left: 273px; 
 
    } 
 

 
    50% { 
 
    top: 308px; 
 
    left: 273px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mouth"></div> 
 
<button id="getQuote">Get Quote</button>

Answer 2

Заменить :hover с другим классом, и добавить этот класс щелкнутого элемента с JQuery.
Таким образом, при нажатии новый класс будет добавлен и будет выполнено условие, которое запускает анимацию.

Answer 3

очень просто:

$('.mouth').css({ 
'<css property>':'<value>', 
'<css property>':'<value>', 
'<css property>':'<value>'... 
}); 

Answer 4

Это довольно прямо вперед. Однако вам нужно немного изменить свой CSS.

Вместо использования: селектора hover, вы хотите сделать это новым классом, допустим, .StartAnimation. Таким образом, ваш CSS становится

.StartAnimation .mouth{ 
    animation-name: talk; 
    animation-duration: 0.75s; 
    animation-iteration-count: 5; 
} 

Тогда в вашем JQuery, мы просто добавить (и/или удалить) этот класс:

$('#getQuote').click(function() { 
    $('.frame').addClass('StartAnimation'); 
    // or toggle it, if a second click should undo the animation 
    // $('.frame').toggleClass('StartAnimation'); 
}); 

Другой способ сделать это, если вы хотите, чтобы сохранить эффект парения , не хотят изменить свой CSS, но по-прежнему хотите анимировать на кнопку мыши, а также (возможно, когда пользователь щелкает что-то другое), будет использовать метод .trigger() в JQuery: http://api.jquery.com/trigger/

$('#getQuote').click(function(){ 
    $('.frame').trigger('mouseenter'); 
}); 

Answer 5

Генеральный LY я использовал, чтобы сделать что-то вроде этого:

//css 
.animation{ 
    ...... 
} 

//jquery 
var animTimeout; 
$('#getQuote').click(function() { 
    clearTimeout(animTimeout); 
    $('.mouth').addClass('animation'); 
    animTimeout = setTimeout(function(){ 
     $('.mouth').removeClass('animation'); 
    }, 'animation duration in ms') 
}); 

Answer 6

Я хотел бы использовать класс CSS, а так:

.mouth.animated { 
    animation-name: talk; 
    animation-duration: 0.75s; 
    animation-iteration-count: 5; 
} 

и JS:

$("#getQuote").click(function() { 
    $(this).prop('disabled', true); // disabling so animation can't be restarted until done 
    $(".mouth").addClass("animated"); 
    setTimeout(function(){ 
     $("#getQuote").prop('disabled', false); 
     $(".mouth").removeClass("animated"); 
    }, 750*5) 
});