jQuery在按钮点击后重新启动动画

Question

jQuery在按钮点击后重新启动动画

4

我有几行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);

其他的都工作正常。我只是不确定重置动画的正确语法，所以当你再次点击 #clicked 时，它基本上是从头开始的。

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

- factordog

1

请准备好jsfiddle，我会尽力帮助你 :) - joryl - Ahs N

1

你能否提供HTML代码或JSFiddle演示来展示Joryl所提到的当前情况呢？ :) - Ahs N

嗨，抱歉离开了一段时间，将在问题中添加一个fiddle。 - factordog

@factordog，你的小提琴似乎没有做任何事情？（另外，只添加相关的CSS可能是个好主意） - Aravona

他只是忘记了包含jQuery。请尝试使用以下代码（包括jQuery）https://jsfiddle.net/uLg99tsw/5/ - Aer0

1

更新了用于Less CSS的jQuery。 - factordog

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahs N · Answer 1

我创建了一个名为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!");
});

这是一个 JSFiddle 示例

- Aer0 · Answer 2

你正在使用 animation-play-state。为什么不使用 transitions？看一下 this，只需在按钮点击时将你的过渡 CSS 类添加/删除到你的标记上即可。