jQuery animate（）；闪烁；在完成之前再次触发时

下面是一个JSFIDLE，它演示了这个问题。。。出于显而易见的原因，这段代码是我实际代码的简化版本，如下所示

CSS

#frame { left:0; position:absolute; width:190px; }
.layer { background:#FFF; position:absolute; right:0; top:0; width:190px; }
#process { z-index:1; }
#contact { z-index:2; }
#message { z-index:3; }

function ajaxMessage(){
    // if( $('#message').is(":animated") ) return;
    $('#contact').fadeOut('slow',function(){
         $('#message').fadeIn('slow')
                      .animate({opacity:1.0},1000)
                      .fadeOut('slow',function(){
                          $('#contact').fadeIn('slow');
                      });
    });
}​

HTML

<div id="frame ">
    <div id="process" class="layer">Processing...</div>
    <div id="contact" class="layer"># Results Found</div>
    <div id="message" class="layer">Results Updated</div>
</div>
<button onclick="javascript:ajaxMessage();">Click Here</button>

详细信息

#frame { left:0; position:absolute; width:190px; }
.layer { background:#FFF; position:absolute; right:0; top:0; width:190px; }
#process { z-index:1; }
#contact { z-index:2; }
#message { z-index:3; }

function ajaxMessage(){
    // if( $('#message').is(":animated") ) return;
    $('#contact').fadeOut('slow',function(){
         $('#message').fadeIn('slow')
                      .animate({opacity:1.0},1000)
                      .fadeOut('slow',function(){
                          $('#contact').fadeIn('slow');
                      });
    });
}​

我有一个提交给AJAX的表单。我正在使用UI滑块进行输入。我使用的是range选项，表单中有几个输入“sliders”，因此AJAX可能每秒被调用多次。当

.load（）

完成时，我将显示一条成功消息。消息是使用

.animate（）

设置动画的，您可以在上面的JS FIDLE链接中看到这一点

问题是，显示消息的函数在完成第一个动画之前将被多次调用。当这种情况发生时，动画会堆积起来，并在用户停止修改表单值很久之后“闪烁”。我试过这个<代码>如果（$（'#message'）。是（“：animated”））返回…但它仍然不能很顺利地工作。基本上，我需要弄清楚如何动态地延长动画的持续时间，或者至少让它看起来像那样工作。或者将成功消息延迟到用户对表单进行最后一次修改之后。。。示例：消息未显示用户更改后的2秒

有什么想法吗

---

接受答案

在行动中接受答案

---

将其与原始at进行比较，查看差异在1-2秒内多次单击按钮，并查看按钮右侧的响应文本。

如果我没有弄错您的问题

你应该使用

像这样,

$('#message').stop().fadeIn('slow').animate({opacity:1.0},1000).fadeOut('slow',function(){
        $('#contact').fadeIn('slow');
});

另外，完成后，再制作一个动画

var msg = $('#message');
msg.stop().fadeIn('slow',function(){
    msg.animate({opacity:1},1000,function(){
        msg.fadeOut('slow',function(){
            $('#contact').fadeIn('slow');
        })
    })
});

---

如果我没弄错你的问题

你应该使用

像这样,

$('#message').stop().fadeIn('slow').animate({opacity:1.0},1000).fadeOut('slow',function(){
        $('#contact').fadeIn('slow');
});

另外，完成后，再制作一个动画

var msg = $('#message');
msg.stop().fadeIn('slow',function(){
    msg.animate({opacity:1},1000,function(){
        msg.fadeOut('slow',function(){
            $('#contact').fadeIn('slow');
        })
    })
});

---

为什么要做

fadeIn（'slow'）。设置动画（{opacity:1.0}，1000）

？在我的实际代码中，设置动画的持续时间更长。我缩短了它以节省测试时的时间。。。无论动画的持续时间如何，它都具有相同的不良效果。为什么要执行

fadeIn（'slow'）。动画（{opacity:1.0}，1000）

？在我的实际代码中，动画的持续时间更长。我缩短了它以节省测试时的时间。。。不管动画的持续时间如何，它都会产生同样的不良效果。谢谢你的帮助，我真的很感激！成功了。谢谢你的帮助，我真的很感激！