Wordpressor Wordpressor - 6 months ago 28
jQuery Question

jQuery - fadeIn(), fadeOut(), animate(), stop() and blinking

When "hover" triggers this code:

jQuery('#test').animate({opacity: 1},300);


And user hovers and unhovers very quickly the "#test" item blinks for a long time (of course opacity is being animated to 1 on hover and to 0 on unhover).

Adding stop() always worked for me:

jQuery('#test').stop().animate({opacity: 1},300);


The point is I have to use fadeIn() and fadeOut() and I'm not sure how to avoid blinking in this case?

Live example: http://jsfiddle.net/caHq5/ (move your pointer very fast from the dark square to the background, then to the square, then to the background and so forth). stops() do nothing.

Answer

Is this the effect you were after?

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').stop().fadeTo(200,1);
            },function() {
        jQuery('#wrong').stop().fadeTo(200,0);
            });
});

If really you want the element to be hidden after it has faded, as opposed to just invisible:

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').stop().show().fadeTo(200,1);
            },function() {
        jQuery('#wrong').stop().fadeTo(200,0, function() {$(this).hide()});
            });
});