Jquery - fadeIn/fadeOut flicker on rollover

Question

I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it\'s parent div.

$(\'.rollover-section\').hover(function(){  
   $         


        

Answer 1

As it was stated already it's because those modify the css and change the display to none. By using fadeTo you can get the same effect, but it doesn't modify the css, so it should work correctly.

update example: http://jsfiddle.net/TFhzE/1/

you can also do

$('.rollover-section').hover(function() {  
   $('.target', this).stop().fadeTo(0,250);
 }, function() {
   $('.target', this).stop().fadeTo(250,0,function(){$(this).hide();});
});

to completely hide it yourself once it actually is complete.