Jquery Image Slider | show/hide functions repeat with quick mouse

Question

Below is my code:

if(settings.controlNav){
                    $('.nivo-controlNav', slider).hide();
                    slider.hover(function(){
                        $('.nivo-controlNav', slider).show('slow');
                    }, function(){
                        $('.nivo-controlNav', slider).hide('slow');
                    });
                }

When I hover over it many times and very quickly then move my mouse off the functions keep going for as many times as I hovered over it which could be close to 10 - 15 times.

Is there a fix for this?

Answer 1

Try using stop(true,true) before the show/hide. i.e.

if(settings.controlNav){
    $('.nivo-controlNav', slider).hide();
    slider.hover(function(){
        $('.nivo-controlNav', slider).stop(true, true).show('slow');
    }, function(){
        $('.nivo-controlNav', slider).stop(true, true).hide('slow');
    });
}

See http://api.jquery.com/stop/