jquery - 单击后如何删除Jquery Sprite动画

Question

我有一个对象，当你点击它时，会发生两件事……一个带有一些文本的 div 出现，一个角色播放一个简短的精灵动画。但是，我希望精灵动画在第一次播放后被完全删除。我希望通过单击继续切换 div 文本框。

这就是我所拥有的：

$(function () {
$("#chalkboardweare").click(function () {
    $("#boxweare").animate({width: 'toggle'}, 500);
            $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50});
});
});

此时，每次单击“#chalkboardweare”对象时，“#boxweare”和“#dude”都会切换...

我希望每次点击都切换“#boxweare”div。

我希望仅在第一次单击后才切换“#dude”div。

有人可以帮我解决这个问题吗？

谢谢！

Answer 1

使用.one()- 它的意思是“只做一次”。单击后（在这种情况下）绑定被删除，但您的.on()绑定将持续存在。

$("#chalkboardweare").one('click', function () {
    $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50});
}).on('click', function () {
    $("#boxweare").animate({width: 'toggle'}, 500);
});

Answer 2

我的策略是#dude在动画之后添加一个数据属性，这样我们就可以在运行动画之前测试该属性的值。这是我的新代码：

$(function () {
   $("#chalkboardweare").click(function () {
      $("#boxweare").animate({width: 'toggle'}, 500);
      if ( !($("#dude").data("played")) )
         $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50}).data("played",true);
   });
});