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