javascript - onClick 的 jQuery 动画不适用于连续点击

Question

我有以下代码来显示“已复制!”单击按钮时的消息。我添加了一些 jQuery 代码来为消息设置动画。问题是，如果我在短时间内单击按钮两次或两次以上，则不会显示消息。并且还有延迟点击，消息仅显示三次点击。第三次单击后，消息未显示。我该如何解决这个问题？

$("button").on("click", function(){
	$(".note").show();
  $(".note").css("opacity", "1");
  $('.note').animate({
    opacity: "0"
  }, 2200);
  $(".note").hide(2200);
});

.note {
        display: none;
        position: absolute;
        background-color: #4ea2e2;
        color: #fff;
        left: 35%;
        padding: 10px;
        border-radius: 4px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="note">
  <span>Code Copied!</span>
</div>

Answer 1

它也在处理多次点击。但是由于你给动画的时间太长，所以没有渲染。一旦第一个动画完成，它将再次开始。您可以检查 chrome 中的按钮并查看值的变化。完成所有计算后，您可以再次单击，它将再次运行。

$("button").on("click", function(){
	$(".note").show();
  $(".note").css("opacity", "1");
  $('.note').animate({
    opacity: "0"
  }, 200);
  $(".note").hide(200);
});

.note {
        display: none;
        position: absolute;
        background-color: #4ea2e2;
        color: #fff;
        left: 35%;
        padding: 10px;
        border-radius: 4px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="note">
  <span>Code Copied!</span>
</div>