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

以下是演示问题的JSFiddle ... http://jsfiddle.net/L2NBP/5/由于显而易见的原因，此代码是我的实际代码的简化版本，如下所示。jQuery animate（）在其完成之前再次触发时“闪烁”

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

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>

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 .load()。我正在使用UI滑块http://jqueryui.com/demos/slider/作为输入。我使用范围选项，并在表单中有几个输入“滑块”，所以AJAX可能会被称为每秒多次。完成时，我正在显示成功消息。该消息使用.animate() 进行动画，如您在上面的JS Fiddle链接中看到的。

问题是，在完成第一个动画之前，显示消息的函数将被多次调用。发生这种情况时，用户停止修改表单值之后，动画会长时间“闪烁”。我试过这个... if($('#message').is(":animated")) return; ...但它仍然不能很顺利地工作。基本上我需要弄清楚如何动态地延长动画的持续时间，或者至少让它看起来像那样工作。或者延迟成功消息，直到用户对表单进行了最后一次修改为止......例如：自用户进行更改后，消息不会显示2秒过去。

任何想法？

接受的答案

行动

接受的答案... http://jsfiddle.net/L2NBP/7/

在http://jsfiddle.net/L2NBP/5/与此相比，原来要看到不同点击按钮多次在1-2秒，手表按钮右侧的响应文本。

来源

2012-07-05 Kirkland

你为什么要做'fadeIn（'slow'）。animate（{opacity：1.0}，1000）'？ – 2012-07-05 11:29:31

在我的实际代码中，动画的持续时间更长。我缩短了它以节省时间，同时测试......无论动画的持续时间如何，它都具有相同的不良效果。 – Kirkland 2012-07-05 17:27:33

如果我有你的问题的权利，

您应该使用stop()

这样，

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

来源

2012-07-05 11:31:12 Jashwant

这样做了。感谢您的帮助 - 我真的很感谢它！ – Kirkland 2012-07-05 17:21:51

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

回答

相关问题