Question

<script type="text/javascript">
 $(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
     $(this).find(".caption").slideDown().end().siblings('.module').addClass('under');
   },function() {
     $(this).find(".caption").slideUp().end().siblings('.module').removeClass('under').delay(10000);   
   });
 });
</script>

This works great, except the .delay doesn’t work, is my syntax wrong? I’m just trying to accomplish haveing the .removeClass(“under”) delayed by a second or two when the mouse un-hovers. I don’t want to delay the slideUp.

Any ideas?

Answer 1

delay() works on the fx queue by default. removeClass does not get added to any queues, so cannot be affected by delay() without some changes.

You can either:

1. Add the removeClass call to the fx queue manually
2. Use setTimeout instead.

Solution 1 Note the reshuffling of delay in the jQuery chain as well!:

$(this).find(".caption").slideUp().end().siblings('.module').delay(1000).queue(function () {
    $(this).removeClass('under').dequeue(); // dequeue is IMPORTANT!
});

Solution 2:

  $(".module").hover(function() {
     $(this).find(".caption").slideDown().end().siblings('.module').addClass('under');
   },function() {
     var self = $(this).find(".caption").slideUp().end().siblings('.module');

     setTimeout(function () {
        self.removeClass('under');
     }, 1000);   
   });

Note that both solutions will give weird (but different) effects if someone mouse overs/ outs a few times. To solve the issues with #1, add .stop().clearQueue() to the chain on mouse over. To solve #2, store a reference to the timeout, and clearTimeout(theVariable) on mouse over.