CODEWITHSUNDEEP
javascriptjqueryanimation
Lior Elrom
Lior Elrom

Reputation: 20862

Strange animation behavior on mouseover/out events

I have two events:

$('li').on({
    'mouseover':fadeImgOut,
    'mouseout' :fadeImgIn
});

and functions...

function fadeImgOut() {
    $(this).find('img').animate({opacity:'.5'}, 1000);
}
function fadeImgIn() {
    $(this).find('img').animate({opacity:'1'}, 1000);
}

When I hover on it, the image fadeout, fadein and fadeout and when I'm moving the mouse out, the image fadein, fadeout and fadein again.

I can't explain this behavior: why the image not fading-in on mouseover and fading-out on mouseout?

Upvotes: 0

Views: 96

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

use

$('li').on({
    'mouseenter':fadeImgOut,
    'mouseleave' :fadeImgIn
});

Or better

$('li').hover(fadeImgOut, fadeImgIn)

Upvotes: 2

Related Questions