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

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() {&nbsp; $(".box2,.box3").hide();&nbsp; $(".box1").click(function() {&nbsp; &nbsp; commonEvent($(this), $(".box2"));&nbsp; });&nbsp; $(".box2").click(function() {&nbsp; &nbsp; commonEvent($(this), $(".box3"));&nbsp; });&nbsp; $(".box3").click(function() {&nbsp; &nbsp; commonEvent($(this), $(".box1"));&nbsp; });})function commonEvent(element, other) {&nbsp; element.animate({&nbsp; &nbsp; left: "1200px"&nbsp; }, 1000).fadeOut("normal", () => {&nbsp; &nbsp; element.css("left", "500px");&nbsp; })&nbsp; other.fadeIn();}body {&nbsp; position: relative;}.box1 {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background-color: rgb(255, 0, 0);&nbsp; position: absolute;&nbsp; top: 300px;&nbsp; left: 500px;}.box2 {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background-color: rgb(2, 149, 246);&nbsp; position: absolute;&nbsp; top: 300px;&nbsp; left: 500px;}.box3 {&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; background-color: rgb(22, 187, 0);&nbsp; position: absolute;&nbsp; top: 300px;&nbsp; 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>