Search code examples
jquerymouseovermouseoutfadeto

jQuery Fading effect occuring multiple times

I am trying to write a simple jQuery script to apply fading effect on footer. On mouseover event, it fades in with opacity = 1, and on mouse out event it fades out to opacity 0.01. I have applied this effect on parent div. The problem is, everytime I move mouse over child elements, it triggers the event and makes the div blink multiple times. How can I stop it? I want the mouseover and mouseout event to trigger when I hover over parent div and not when I move mouse inside the parent div.

Here is the situation

Thanks for any help in advance... :)

Solution

  • You should be able to use the stop() function to prevent this: http://api.jquery.com/stop/

    $(this).stop().fadeTo("fast",1.00);
$(this).stop().fadeTo("fast",0.01);

    http://jsfiddle.net/w7Vbu/7/