1

I've created this simple plugin to add multiple animations on click but the problem is that once the object is clicked it can not repeat the animation by clicking again, i can't figure out why the added class is not removing itself after the click function is complete to allow it to be clicked again and repeat.. any suggestions?

(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);​
4

2 に答える 2

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

because .bind() accept parameters like following:

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

Read about .bind()

To remove class you can do:

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);
});

To increase the timeout you can do following:

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);
});
于 2012-06-02T16:39:10.273 に答える
1

Here's a working example (I guess, because I don't know exactly what's the intended effect of your plugin):

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

于 2012-06-02T16:59:31.410 に答える