jquery mouseover mouseout

Question

$('.rollover').mouseover(function(e){

        e.stopPropagation();

        thisName = $(this).attr('title');

        $('li#'+thisName).show(50, 'swing');

    });


    $('.rollover').mouseout(function(e){

        e.stopPropagation();                    

        thisName = $(this).attr('title');

        $('li#'+thisName).hide(50, 'swing');

    });

I have four pictures with the class 'rollover', so when the mouse goes over each picture, a list item that shares its id with the image title is displayed, and when the mouse leaves the list item is hidden.

My problem is that the images are quite close together and if the mouse enters and leaves too quickly it just looks like the list items are flashing. I would prefer it so that the mouseout animation has to complete before the next mouseover animation begins and vice versa.

How would i do this?

JS FIDDLE @ http://jsfiddle.net/callumander/XhpuT/

Answer 1

Rather than slow things down by making every animation complete before your user can view a new piece of content, why not use something like the Hover Intent plugin to prevent 'accidental' mouseovers?

Answer 2

Try using the .queue (untested):

$('.rollover').mouseover(function(e){
    e.stopPropagation();
    thisName = $(this).attr('title');

    // start the showing once any currently running
    // animations are done
    $('li#'+thisName).queue(function() {
        $(this).show(50, 'swing');
        $(this).dequeue();
    });
}).mouseout(function(e){
    e.stopPropagation();                    
    thisName = $(this).attr('title');

    // start the hiding once any currently running
    // animations are done 
    $('li#'+thisName).queue(function() {
        $(this).hide(50, 'swing');
        $(this).dequeue();
    });
});