jquery 淡化 in/out 确认文本

Question

我在页面上有一个 div，默认情况下它是空的（and/or 隐藏），不同操作后的确认文本应该打印一段时间然后消失。

我想用 jquery 做到这一点，但在淡入和淡出时遇到了困难。

我使用了这个代码：

<div id='confirmation' style='display:none'></div>

$('#confirmation').html("<font color='green'>Success!</font>").fadeIn(300).delay(3000).fadeOut(300);

它有点管用，但是当页面向此 div 发送多个确认文本时，一切都被破坏了。即使文本已更改，它仍然会继续尝试淡出前一个，然后再次淡入。

我希望它表现得像这样：当发送多个确认时，它们之间的延迟很小，它应该停止执行当前序列并从头开始（立即淡出，更改文本，然后慢慢淡入） .

还有初始 'display:none' 第一个序列的行为不同。

你能建议一些方法来实现我想要的吗？

Answer 1

您可以为此使用 jQuery.stop()。可能是您需要更改它们的位置以创建完美的序列，但我希望您能理解。 ✌️

编辑：忘记添加 clearQueue true 命令。您可以在 https://api.jquery.com/stop/

上找到更多信息

$('#cc').click(function(){
  $('#confirmation').stop(true, false).html("Success").fadeIn(300).delay(3000).fadeOut(300);
});

#confirmation {
color:#000;
  border: 1px solid #CCC;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="confirmation"></div>
<div id="cc">Click to confirm</div>

jquery 淡化 in/out 确认文本

jquery fading in/out a confirmation text

jquery

fadeout

fadein