我有几行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 时,它基本上是从头开始的。