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>

Answer 2

您的问题是您的动画时间过长，从而阻止了多个CSS动画的发生。您可以使用jQuery的内置方法.fadeOut()淡化为opacity的不透明度，而不必自己为0设置动画。

请参见工作示例：

$("button").on("click", function() {
  $(".note").show();
  $(".note").fadeOut(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 3

尝试重新排列代码：

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

Answer 4

在开始另一个动画之前停止动画。

$("button").on("click", function(){
  $(".note").stop();
	$(".note").show();
  $(".note").css("opacity", "1");
  $('.note').animate({
    opacity: "0"
  }, 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 5

您可以使用stop()方法停止每次点击的动画，并在动画完成后添加hide()方法

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

.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 6

您可以简单地使用fadeIn()和fadeOut()：

$("button").on("click", function(){
  $('.note').fadeIn(2200);
  $('.note').fadeOut();
});

.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>

用于onClick的jQuery动画无法连续点击

6 个答案: