CODEWITHSUNDEEP
jquery
Ahmed Fouad
Ahmed Fouad

Reputation: 3073

How to fix this inconsistent dropdown toggle when i move mouse too fast?

I made the following code to expand menu when mouse is over the LI item, and hide menu when mouse leaves the LI.

$('.sort').bind('mouseenter',function(){
    $('.options').slideDown('slow');
}).bind('mouseleave',function(){
    $('.options').fadeOut('fast');
});

.sort is the class of li item. .options is the children UL. The code works fine as when I move mouse over the list item it expands the menu, and when i leave the item, it fades out. But I get inconsistent toggling/fading if i move mouse too quick over and in the item. It creates an infiniate fade/toggle how to fix it?

Sorry guys, the HTML:

        <ul id="options">
            <li class="sort"><a href="#" class="sort-link"><?php _e('Shop by Brand','onecart'); ?></a>
                <ul class="options">
                    <li><a href="#">Latest Arrivals</a></li>
                    <li><a href="#">For Men</a></li>
                    <li><a href="#">For Women</a></li>
                    <li><a href="#">For Kids</a></li>
                    <li><a href="#">On Sale</a></li>
                </ul>
            </li>
        </ul>

the css:

#options li.sort {
    position: relative;
    padding: 0 0 8px 0;
}
#options li.sort .sort-link {
    display: block;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    color: #686868;
    text-transform: uppercase;
    text-shadow: 0 1px #eee;
    background: url(../img/arrow-list.png) no-repeat right top;
    padding: 0 16px 0 0;
}
#options li.sort .sort-link:hover {color: #000}
#options li.sort .current {
    color: #000;
    background-position: right bottom;
}

ul.options {
    display: none;
    position: absolute;
    background: #fff;
    top: 36px;
    left: 0;
    width: 180px;
    padding: 6px 0;
    border-top: 3px solid #ea6ea0;
    box-shadow: 0 1px 2px #aaa;
    z-index: 4;
}

Upvotes: 0

Views: 550

Answers (2)

Rohit
Rohit

Reputation: 356

Try the jquery hoverintent plugin. also, have a look at a good post here.

This will prove almost necessary if you are dealing with any kind of drop-down mega menu unless you want to write your own delayed mouse-over implementation with timeouts and cursor boxing.

Upvotes: 0

xdazz
xdazz

Reputation: 160863

Use .stop(true, true) to remove queued animation and complete the current animation immediately:

$('.sort').hover(function(){
  $('.options').stop(true, true).slideDown('slow');
}, function() {
  $('.options').stop(true, true).fadeOut('fast');
});

Upvotes: 2

Related Questions