CODEWITHSUNDEEP
jquerymenuslide
Andrea Turri
Andrea Turri

Reputation: 6500

jQuery menu slide right

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

Upvotes: 2

Views: 6737

Answers (4)

Mitch Malone
Mitch Malone

Reputation: 892

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

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

Upvotes: 2

Mitch Malone
Mitch Malone

Reputation: 892

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);
    }
);

Upvotes: 0

bleepzter
bleepzter

Reputation: 9985

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

Upvotes: 0

mVChr
mVChr

Reputation: 50185

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);
    }

);

Upvotes: 0

Related Questions