如何让 .onclick 函数从头开始再次执行动画并监听它是否已经完成

Question

当我按下按钮 2 时，我希望按钮 1 的动作消失，反之亦然。

$(".btn1").on('click', function(){

Answer 1

如果您想在单击按钮时显示特定元素，则可以在按钮的某些属性中设置目标元素，然后在单击按钮时可以先隐藏所有元素，然后 fadeIn 目标元素。

检查下面的代码。

$(document).ready(function() {
  $("button").on('click', function() {
    $("p").hide();
    $($(this).data("target")).fadeIn(500);
  });
});

.p1 {
  display: none;
}

.p2 {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<button class="btn1" data-target=".p1">Button1</button>
<button class="btn2" data-target=".p2">Button2</button>
<p class="p1">
  Hello :)
</p>
<p class="p2">
  How are you?
</p>

如何让 .onclick 函数从头开始再次执行动画并监听它是否已经完成

How to make .onclick function perform the animation again from the start and listen if its already completed

jquery

animation

function

onclick

repeat