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

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>