Question

这是一个演示问题的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()完成后，我正在显示成功消息。正如您在上面的JS Fiddle链接中所看到的那样，使用.animate() http://api.jquery.com/animate/对动画进行了动画制作。

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

有什么想法吗？

接受回答

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

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

Answer 1

如果我的问题是对的，那么

您应该使用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');
        })
    })
});

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

1 个答案: