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

Question

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/

Answer 1

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

Answer 2

You just need to use stop() to clear queued animation;

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