Search code examples
jquerymouseoveropacitymouseout

my jquery function is executed a lot of time instead of one

when I'm passing my mouse over .test I want .hide to show and when I'm passing my mouse out .test I want .hide to hide

Unfortunatly it shows and it hides more than once.

My code is:

.hide{
    opacity: 0;
    filter: "old-ie-staff";
}

$(document).on('mouseover', '.test', function () {
    $(this).find('.hide').animate({opacity: 1},300);
}).on('mouseout', function() {
    $(this).find('.hide').animate({opacity: 0},300);
});

here a Fiddle link: http://jsfiddle.net/malamine_kebe/2bnZW/

Solution

  • Multiple animation sequences will be queued when performing mouseover or mouseout on the element. jQuery provides a way to stop these animations and remove them from the animation queue.

    Adding .stop(true) before .animate() will

    Stop the currently-running animation on the matched elements

    The true parameter will also remove any already queued animations - see Prevent Animation Queue Buildup