2

I'm searching all evening now. And I still don't have the answer. How do I queue up different actions in jQuery? I know, everybody says that you have to use the callback-method, but that ain't working. I just want to hover my mouse on the menu and it has to display the subitems. When I leave, the subitems have to remain there. When I hover over an other item, then the subitems have to dissappear and the new submenu has to SlideDown.

I want to do this with addClass so I can check if the menu is active or not. But I made an example just to see if it would work (without the addClass...): http://jsfiddle.net/yBJvS/

I had the right code, but then all the elements that have to go up (ul li ul) are going up the same time as the new menu comes down. That's not what i want.

Also I still don't get the Stop() attribute. If I put it in front of the .slideDown or .slideUp then the whole animation doesn't work anymore :S

Can anyone give me an advise? I can't figure it out :(

Thanks in advance!

Milaan

2
  • There's a great little plugin for jquery that does pretty much what you describe... see: cherne.net/brian/resources/jquery.hoverIntent.html
    – John K.
    Feb 8, 2011 at 20:35
  • @John K. thanks for your answer but it should also work with stop() right? I don't like the timeOut in the plugin :$ I want it to be fast and smooth. Or does the stop() only work on .animate? According to the jQuery Reference it should work both? :S
    – Milaan
    Feb 8, 2011 at 20:43

1 Answer 1

1

Maybe like this? Demo

I've removed the parts that distracted from the core functionality, but it shouldn't be a problem to put in the rounded corners, etc.

4
  • It's exactly what i'm searching for! But I want to ask you 3 things: 1) If you hover youre mouse over 1 or 2 or 3, sometimes it goes down, up and down? 2) How do I implement a 'stop()' into the code you provided? :$ I can't get it to work (this wil probably fix issue #1) 3) What does the 'n' mean in the function(n)? Later at the slideDown you use the callback 'n'? What does it callback then? :$ Thanks for youre time and the code! It works as I want it to be! Thank you!!!
    – Milaan
    Feb 9, 2011 at 16:17
  • Hi. Ad 3): Look here: api.jquery.com/queue/#queue2 The n parameter simply provides a function that you can call to dequeue the next item in the queue. Ad 1) and 2): I'd advise against using stop(). It will probably confuse the sliding animations. Instead, I'd change the markup to separate the sliding panels from the menu bar, so that the mouseenter event is really only triggered by the menu bar, and not by the panels that slide in/out.
    – Thomas
    Feb 9, 2011 at 16:53
  • Sorry for late answer :$ I didnt had the time to continue the project I was working on. But youre awesome! Thank you very much for youre time and help! I really appreciate it! It's exactly what I wanted! Thanks!
    – Milaan
    Mar 9, 2011 at 14:09
  • EDIT: I worked it out :) But still its weird that the Fiddle code doesnt work in IE and FF when you put it in one PHP file :) But I've got it working! Thank you very much!
    – Milaan
    Mar 9, 2011 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.