Question

Here’s my code…

 $('nav ul li').hover(function() {

    $(this).addClass('hoverIn');


  },
  function() {

    $(this).addClass('hoverOut');


  });

which works fine.

But when I add delay() and removeClass() it doesn’t work, as follows…

 $('nav ul li').hover(function() {

    $(this).addClass('hoverIn').delay(800).removeClass('hoverIn');


  },
  function() {

    $(this).addClass('hoverOut').delay(800).removeClass('hoverOut');


  });

Am I doing something wrong here?

Any help would be greatly appreciated. Thanks.

Answer 1

As others have mentioned, .removeClass() is not an animation function so is unaffected by any queued effects.

The simplest solution is to use .queue() to insert your call into the animation queue:

$(this).addClass('hoverIn').delay(800).queue(function() {
    $(this).removeClass('hoverIn').dequeue();
});

The .dequeue() call is important to ensure that any other queued operations still take place.

Note that using the animation queue also means that you can use .stop() to cancel the operation if it hasn’t happened yet. Using timers would make that a lot more complicated.

---

If you want to get really fancy, this plugin I just knocked out will allow you to add any arbitrary jQuery function into the animation queue:

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

with this, the line above would become:

$(this).addClass('hoverIn').delay(800).queued('removeClass', 'hoverIn');

demo at http://jsfiddle.net/alnitak/h5nWw/