Jquery перезапустить анимацию после нажатия кнопки

Question

У меня есть несколько строк Jquery:

$(document).on('click', '#clicked', function(e){ 
    e.preventDefault(); 
    $(".speech").css("animation-play-state", "running"); 
}); 

// Change text on click and reset animation 
// 
$(document).on('click', '#clicked2', function(e){ 
    e.preventDefault(); 
    $('.speech').each(function() { 
     var text = $(this).text(); 
     $(this).text(text.replace('I AM A WOOKIE!!', 'YOU CLICKED!')); 
    }); 
    setTimeout(function(){ 
     var redo= $('.speech'); 
     $("." + redo.attr(".speech") + ":last").remove(); 
     // $(".speech").remove(); 
     $(".speech").css("animation-play-state", "paused"); 
    }, 2000); 
}); 

Как это работает до сих пор является то, что при нажатии кнопки #clicked анимационной пьесы.

К тому же, щелкнув по кнопке «clicked2», он изменит строку с «Я-А-ВУКИ» !! ВАМ ЩЕЛКНУТ !.

То, что я тогда пытаюсь достичь, после функции таймаута затем сбрасывается обратно в начало оригинальной анимации. Так что в основном кнопка сброса, но я не уверен, как туда добраться.

линии в вопросе являются:

setTimeout(function(){ 
    var redo= $('.speech'); 
    $("." + redo.attr(".speech") + ":last").remove(); 
    // $(".speech").remove(); 
    $(".speech").css("animation-play-state", "paused"); 
}, 2000); 

Все остальное работает как положено. Я просто не уверен в правильном синтаксисе, чтобы сбросить свою анимацию, так TAHT при нажатии кнопки #clicked снова в основном, начиная с самого начала

https://jsfiddle.net/uLg99tsw/8/

Answer 1

Вы используете animation-play-state. Почему вы не используете transitions? Взгляните на this и просто add/remove ваш класс перехода CSS к вашей разметке при нажатии кнопки.

Answer 2

Я создал класс anim затем переключен его:

.anim { 
    animation: talking 2s forwards; 
} 

$(document).on('click', '#clicked', function(e) { 
    e.preventDefault(); 
    $(".speech").text("I AM A WOOKIE!!").toggleClass("anim"); 
}); 

$(document).on('click', '#clicked2', function(e) { 
    e.preventDefault(); 
    $(".speech").text("YOU CLICKED!"); 
}); 

Here is the JSFiddle demo