CODEWITHSUNDEEP
jqueryfadeinfadeout
twidizle
twidizle

Reputation: 1535

Using fadeOut() and fadeIn() on mouseover and mouseout

My problem is that when I am using fadeOut() on mouseover and fadeIn() on mouseout() (on a < li > component), I am not getting the results that I am expecting. What happens is that sometimes when the mouse is not on the object, the buttons that I want to fadeOut() just keep fading in and out in a loop and sometimes the loop stops and sometimes it doesn't.

What is the proper way of using fadeOut and fadeIn with mouseover and mouseout?

here is the code:

comment.onmouseout = function() {mouseOut(comment);};
comment.onmouseover = function() {mouseOver(comment);};

where comment is a basic < li > with buttons as children

function mouseOut(parent){
    var children = parent.childNodes;
    var i=0;
    for(i=1;i<children.length;i++){
        if(children.item(i).tagName=="INPUT"){
            $(children.item(i)).fadeOut();
        }
    }
}
function mouseOver(parent){
    var children = parent.childNodes;
    var i=0;
    for(i=1;i<children.length;i++){
        if(children.item(i).tagName=="INPUT"){
            $(children.item(i)).fadeIn();
        }
    }
}

Upvotes: 1

Views: 3041

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

That happens because when the opacity reaches 0 the display is set to none. so the element disappears, trigerring the mouseout.

quote from .fadeOut()

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

So it would be better to animate the opacity instead

instead of fadeout

$(children.item(i)).animate({opacity:0},  400);

and instead of fadein

$(children.item(i)).animate({opacity:1},400);

another issue is that the animations get queued. So you would be better to stop the current animation before starting the next.

instead of fadeout

$(children.item(i)).stop().animate({opacity:0},  400);

and instead of fadein

$(children.item(i)).stop().animate({opacity:1},400);

If you could post your HTML it would be easier to post pure jquery code to handle the whole issue.

Upvotes: 5

dheerosaur
dheerosaur

Reputation: 15172

Using mouseenter, mouseleave will solve most of the problems caused by mouseout, mouseover. hover wraps around mouseenter and mouseleave to provide even better handling.

Upvotes: 1

Related Questions