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

jQuery-fadeIn()、fadeOut()、animate()、stop()和闪烁,jquery,jquery-animate,fadein,fadeout,Jquery,Jquery Animate,Fadein,Fadeout,当“悬停”触发此代码时: jQuery('#test').animate({opacity: 1},300); 用户悬停和取消悬停时,“测试”项会很快闪烁很长时间(当然,悬停时不透明度设置为1,取消悬停时不透明度设置为0) 添加stop()始终对我有效: jQuery('#test').stop().animate({opacity: 1},300); 关键是我必须使用fadeIn()和fadeOut(),我不知道在这种情况下如何避免闪烁 活生生的例子:(将你的指针从黑色的正方形快速移动到背

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

jQuery('#test').animate({opacity: 1},300);
用户悬停和取消悬停时,“测试”项会很快闪烁很长时间(当然,悬停时不透明度设置为1,取消悬停时不透明度设置为0)

添加stop()始终对我有效:

jQuery('#test').stop().animate({opacity: 1},300);
关键是我必须使用fadeIn()和fadeOut(),我不知道在这种情况下如何避免闪烁


活生生的例子:(将你的指针从黑色的正方形快速移动到背景,然后移动到正方形,然后移动到背景等等)。停止()什么都不做。

这就是你想要的效果吗

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

我相信这可能管用

jQuery(document).ready(function() {    
    jQuery('#container').hover(function(){
        jQuery('#wrong').clearQueue().fadeTo(400, 1);
            },function() {
        jQuery('#wrong').clearQueue().fadeTo(400, 0);
            });   
});
在“Wordpressor”解决方案的基础上,我提出了以下建议:

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