jQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁答案

【问题标题】：jQuery - fadeIn(), fadeOut(), animate(), stop() and blinkingjQuery - fadeIn()、fadeOut()、animate()、stop() 和闪烁
【发布时间】：2011-10-01 17:06:26
【问题描述】：

当“悬停”触发此代码时：

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

并且用户悬停和取消悬停非常快，“#test”项目会闪烁很长时间（当然不透明度在悬停时动画为 1，在悬停时动画为 0）。

添加 stop() 总是对我有用：

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

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

实时示例：http://jsfiddle.net/caHq5/（将您的指针非常快速地从黑色方块移动到背景，然后移动到方块，然后移动到背景等等）。 stop() 什么都不做。

【问题讨论】：

标签： jquery jquery-animate fadein fadeout

【解决方案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()});
            });
});

【讨论】：

【解决方案2】：

我相信这可能会奏效。

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

【讨论】：

【解决方案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);
    });
});

【讨论】：