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.

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()});
            });
});

I believe this might work.

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

Adding to the "Wordpressor's" solution, I came up with this:

http://jsfiddle.net/VTG3r/25/

jQuery(document).ready(function()
{
    // Perform events when mouse enters the container.
    jQuery( "#container" ).bind( "mouseenter", function()
    {
        // Stop any previous animations and fade in.
        jQuery( "#test" ).stop().animate({ "opacity": 1 }, 300);
        jQuery( "#wrong" ).stop().fadeTo( 300, 1 );
        jQuery( "#OK" ).stop().animate({ "opacity": 1 }, 300);
    });
    // Perform events when mouse leaves the container.
    jQuery( "#container" ).bind( "mouseleave", {}, function()
    {
        // Stop any previous animations and fade out.
        jQuery( "#test" ).stop().animate({ "opacity": 0 }, 300);
        jQuery( "#wrong" ).stop().fadeTo( 300, 0 );
        jQuery( "#OK" ).stop().animate({ "opacity": 0 },300);
    });
});