javascript - jQuery插件上的点击功能只允许单击

Question

我创建了这个简单的插件来在单击时添加多个动画，但问题是一旦单击对象，它就无法通过再次单击来重复动画，我无法弄清楚为什么添加的类在单击后没有自行删除功能已完成，允许再次单击并重复..有什么建议吗？

(function($) {
    $.fn.vivify = function(options) {
        var defaults = {
            animation: 'bounce',
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var o = options;
            var obj = $(this);
            var animation = o.animation;
            obj.bind("click", function() {
                obj.addClass(o.animation);
                obj.addClass('vivify');
            }, function() {
                obj.removeClass(o.animation);
            });
        })
    }
})(jQuery);​

Answer 1

这是一个工作示例（我猜，因为我不确切知道您的插件的预期效果是什么）：

http://jsfiddle.net/gabrieleromanato/Fmr9g/

Answer 2

obj.bind("click", function() {
        obj.addClass(o.animation);
        obj.addClass('vivify');
}, 
// this callback is not valid
function() {
     obj.removeClass(o.animation);
 });

因为.bind()接受如下参数：

.bind(eventName, [eventData], [callback])

阅读.bind()

要删除课程，您可以执行以下操作：

obj.bind("click", function() {
    obj.addClass(o.animation);
    obj.addClass('vivify');
    // you can removeClass here
    obj.removeClass(o.animation);

   // but you need some delay

   setTimeou(function() {
      obj.removeClass(o.animation);
   }, 5000);
}); 

要增加超时，您可以执行以下操作：

return this.each(function(index, val) {
       var o = options;
       var obj = $(this);
       var animation = o.animation;
       obj.bind("click", function() {
         obj.addClass(o.animation);
         obj.addClass('vivify');
       }, index * 2000);
});