1

I created a dropdown menu using jQuery. So when I hover over a button it slides down the menu. Now if I move the mouse out of the menu and bring it back in before it slides up(menu has a lot of items so there is enough time to bring the mouse back in on the menu)over the dropdown menu it starts a chain of slideDown() and slideUp() functions and it does not stop till I move the mouse of the menu or back on the button. Below is my jQuery code:

$(function() {
    $('#slideshow1').cycle();  

    $('#projects').mouseenter(function(){
        $('#dd_Projects').slideDown();
    });  

    $('#projects').mouseleave(function(){
        $('#dd_Projects').slideUp();
    });
});

I have been looking online and I have already tried e.stopPropagation() but it does not work.

This is only happening in Firefox, everything works fine in IE7, IE8, Safari, Chrome, not sure about other versions of Firefox.

Please advise

sayayin
  • 971
  • 5
  • 23
  • 36

1 Answers1

1

jQuery's stop function should do what you are after. Pass in true as the first parameter to clear the animation queue. You probably don't want to jump to the end of the animation, so don't pass true as the second param.

So something like:

$('#dd_Projects').stop(true).slideDown('fast', function(){
    $(this).css('height', '');
});

and

$('#dd_Projects').stop(true).slideUp('fast', function(){
    $(this).css('height', '');
});

in place of your current slides should do the trick.

Spycho
  • 7,698
  • 3
  • 34
  • 55
  • Thanks for your reply. It worked a little but there is a problem. Now the menu does no go crazy like before but now if i move out of the menu and come back in it stops the menu animation wherever it is when I move the mouse back in but then if i hover over the button it does not slide down the whole menu, it slides it down till the point where it was when I brought the mouse back in earlier...hope i could explain this in better words..Make sense? – sayayin Jun 23 '11 at 17:28
  • Ah, I think I see what you mean. If you stop a slideDown, it will leave height data set. You'll need to clear that. I'll update my answer accordingly. – Spycho Jun 24 '11 at 08:56
  • You are awesome!! That worked! I made a little change though, for the slideUp instead of the height I specified display:none. It's working perfect in all browsers now. Thank you so much. $('#dd_Projects').stop(true).slideUp('slow', function(){ $(this).css('display', 'none'); }); – sayayin Jun 24 '11 at 13:56
  • I think slideUp will set display:none; anyway? The height reset was there so that it clears the height when it completes slideUp. If you don't have this the following will happen: If you slideDown and interupt with slideUp, the height data will be left at whatever point you interrupted it at. If you then slide down again, it will slide as far as the height value (not all the way) and then the slideDown callback will fire, which removes the height, causing the thing to "jump" all the way down. If instead, you cleared height when slideUp completes as well, this would not happen. – Spycho Jun 24 '11 at 14:13
  • You are absolutely right, there was no need for the css, display:none. Your code works perfect! Thanks again! – sayayin Jun 24 '11 at 17:09
  • No problem. If you are happy with the answer, could you mark it as "accepted" (the tick to the left of the question). That way, other people will know that your question has been answered and not waste their time looking at it. Also, if you like a question, you can "upvote" it, to indicate to others that you find it useful. – Spycho Jun 27 '11 at 09:24