如何重复淡入淡出和动画？

Question

我运行此代码并且它有效，但是当 $(".box3").click 时，$(".box1") 不会淡入和动画，它会直接显示在窗口中。之后 $(".box2") 和 $(".box3") 在第二次出现了一些问题。难道fadeIn和animate只运行一次？我想运行更多次但仍然具有淡入、淡出和动画效果。谢谢你的回答。$(function() {  $(".box2,.box3").hide();  $(".box1").click(function() {    $(".box1").animate({      left: "1200px"    }, 1000).fadeOut();    $(".box2").fadeIn();  });  $(".box2").click(function() {    $(".box2").animate({      left: "1200px"    }, 1000).fadeOut();    $(".box3").fadeIn();  });  $(".box3").click(function() {    $(".box3").animate({      left: "1200px"    }, 1000).fadeOut();    $(".box1").fadeIn();  });})body {  position: relative;}.box1 {  width: 300px;  height: 300px;  background-color: rgb(255, 0, 0);  position: absolute;  top: 300px;  left: 500px;}.box2 {  width: 300px;  height: 300px;  background-color: rgb(2, 149, 246);  position: absolute;  top: 300px;  left: 500px;}.box3 {  width: 300px;  height: 300px;  background-color: rgb(22, 187, 0);  position: absolute;  top: 300px;  left: 500px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="box1"></div><div class="box2"></div><div class="box3"></div>

Answer 1

解释：由于所有元素都有类似的事件绑定，我创建了一个commonEvent函数，减少了代码。该fadeOut函数接受回调函数作为参数，该函数在fadeOut执行时执行。单击时.box1，其left属性设置为1200px。500px这就是为什么，我在它的回调函数中将它的值改回了，即初始值。

$(function() {

  $(".box2,.box3").hide();

  $(".box1").click(function() {

    commonEvent($(this), $(".box2"));

  });

  $(".box2").click(function() {

    commonEvent($(this), $(".box3"));

  });

  $(".box3").click(function() {

    commonEvent($(this), $(".box1"));

  });

})

function commonEvent(element, other) {

  element.animate({

    left: "1200px"

  }, 1000).fadeOut("normal", () => {

    element.css("left", "500px");

  })

  other.fadeIn();

}

body {

  position: relative;

}

.box1 {

  width: 300px;

  height: 300px;

  background-color: rgb(255, 0, 0);

  position: absolute;

  top: 300px;

  left: 500px;

}

.box2 {

  width: 300px;

  height: 300px;

  background-color: rgb(2, 149, 246);

  position: absolute;

  top: 300px;

  left: 500px;

}

.box3 {

  width: 300px;

  height: 300px;

  background-color: rgb(22, 187, 0);

  position: absolute;

  top: 300px;

  left: 500px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>