jQuery Delay Question

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?

Matt · Accepted Answer · 2010-06-06 02:04:09Z

3

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:

Add the removeClass call to the fx queue manually
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.

answered Jun 6, 2010 at 2:04

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Craver Over a year ago

You should also clear that timer in the mouseenter (mot mouseover! it's different :) function, I recommend storing the int representing it in .data()

Collectives™ on Stack Overflow

jQuery Delay Question

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related