JQuery slide right menu

Question

I make a simple menu in the list, where inside each element there is a second menu.

ul.first li and ul.second li

The menu will move to the right because it is a menu on the left side of the website.

I wrote this in 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 fine, but there is a problem inside!

If I press the mouse button and exit one element, it opens and closes many times when I did this.

This is the first thing I want to fix!

Second:

if the mouse enters and takes out the mouse before the switch is completed, I would like it to not finish switching everything except to stop it and start switching back to the beginning.

I hope everything will be clear enough for your help!

Thank!

EDIT:

Look at fiddle

Answer 1

. , . !

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

Answer 2

.stop(). true , false , , , :

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 out this demo: http://css-tricks.com/simple-jquery-dropdowns/

Answer 4

You just need to add .stop () to .animate () and this will prevent the sequence of animations.

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