jQuery menu slide right

Question

I'm doing a simple menu into a list with inside every single item a second menu.

ul.first li and ul.second li

The menu will slide on right becouse is a menu on the left side of the website.

I wrote this on jQuery:

var secs1 = $('ul.first > li');

secs1.hover(

    function () {
        $(this).find('ul.second').animate({ width: 'toggle' }, 500);
    },
    function () {
        $(this).find('ul.second').animate({ width: 'toggle' }, 250);
    }

);

It works perfect but there is a problem inside!

If I do mouse enter and mouse out on the single element it open and close many times as I did it.

This is the first think that I want to fix!

The second is:

if i mouse enter and mouse out before the toggle is completed I would like that it doesn't finish to toggle everything but stop to do that and start to toggle back to the origin.

I hope everything is clear enough for your help!

Thanks!

EDIT:

See it on Fiddle

Answer 1

Here is the correct code. Tested, tidy and working. Enjoy!

http://jsfiddle.net/ReuLr/6/

Answer 2

You're looking for the .stop() method. For the paramaters passed in, the first true clears the animation queue, and the second false stops wherever you are in the animation before continuing instead of jumping to the animation's end:

var secs1 = $('ul.first > li');

secs1.hover(

    function () {
        $(this).find('ul.second').stop(true, false).animate({width:'toggle'}, 500);
    },
    function () {
        $(this).find('ul.second').stop(true, false).animate({width:'toggle'}, 250);
    }

);

Answer 3

You need to use the hoverIntent plugin for JQuery. Check this demo: http://css-tricks.com/simple-jquery-dropdowns/

Answer 4

You simply need to add a .stop() before .animate() and it will prevent queuing of animations.

$('ul.first > li').find('ul.second').hover(
    function () {
        $(this).stop().animate({ width: 'toggle' }, 500);
    },function () {
        $(this).stop().animate({ width: 'toggle' }, 250);
    }
);