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

Question

当"hover"触发此代码时:

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

用户悬停和移除非常快，"#test"项闪烁了很长时间(当然，不透明度在悬停时被动画为1，在悬停时被动画为0)。

添加stop()总是对我有效:

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

关键是我必须使用fadeIn()和fadeOut()，我不知道如何避免在这种情况下眨眼?

活生生的例子:http://jsfiddle.net/caHq5/(将你的指针从黑色方块快速移动到背景，然后移动到方块，然后移动到背景，等等)。stop()不做任何事情

Answer 1

这是你想要的效果吗?

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

如果你真的想让元素在淡出后隐藏，而不是不可见:

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

Answer 2

我相信这可能行得通。

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

Answer 3

添加到"Wordpressor的"解决方案，我想到了这个:

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