0

这是一个演示问题的 JSFiddle... http://jsfiddle.net/L2NBP/5/ 出于显而易见的原因，此代码是我的实际代码的简化版本，如下所示。

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>

​JS 

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

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

有任何想法吗？

接受的答案

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

将其与http://jsfiddle.net/L2NBP/5/上的原始版本进行比较。 要查看差异，请在 1-2 秒内多次单击按钮，然后查看按钮右侧的响应文本。

4

1 回答 1

3

如果我的问题是正确的，

你应该使用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-05T11:31:12.037 回答