单击后如何删除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);
   });
});