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然后从I AM A WOOKIE更改字符串!!你点击了！。

我试图实现的是在超时功能之后它然后重置回原始动画的开始。所以基本上是一个重置按钮，但我不知道如何到达那里。

有问题的行是：

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

其他一切都按预期工作。我只是不确定正确的语法，以便重置我的动画，所以当你再次点击#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

单击按钮后Jquery重新启动动画

2 个答案: