CODEWITHSUNDEEP
jqueryhiddenfadeinfadeout
newbie_86
newbie_86

Reputation: 4610

fade hidden div in and out with jquery

i'm trying to fade a few hidden divs in on hover and out on mouse leave, but what seems to be happening is that the divs sort of flicker instead of just fading in.

initially when created the divs are hidden: 

$(container).find('.myDiv').hide();

then i have 2 functions as follows: 

function showDivs(container) {
    $(container).find('.myDiv').fadeIn('slow');
}

function hideDivs(bucketContainer) {
     $(container).find('.myDiv').fadeOut();
}

and this all put together as follows: 

$('.container').live('mouseover', function() {
        showDivs(this);
});

$('.container').live('mouseout', function() {
        hideDivs(this);
});

How do i get rid of the odd flicker effect?

Upvotes: 1

Views: 817

Answers (3)

Corneliu
Corneliu

Reputation: 2942

jQuery API:

mouseover/mouseout event types can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

Upvotes: 1

ezmilhouse
ezmilhouse

Reputation: 9121

my guess is that you execute the 'live' blocks

$('.container').live('mouseover', function() {
        showDivs(this);
});

$('.container').live('mouseout', function() {
        hideDivs(this);
});

more than one time.

If you do so you add up many mouseover, mouseout events on your DOM objects because jQuery is not replacing the live binds but stacking them.

So for example if you by accident run your live blocks 10 times, then with every mouseover, your live('mouseover') ... will be called 10 times.

That might look like flickering :-)

Upvotes: 1

Benoît
Benoît

Reputation: 7427

Can you try mouseenter/mouseleave instead of mouseover/mouseout ?

Upvotes: 0

Related Questions