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

问题描述

我运行了这段代码，并且可以运行，但是当$（“。Box3”）。click，$（“。Box1”）不会淡入和设置动画时，它将直接显示在窗口中。其次$（“。Box2”）和$（“。Box3”）在第二次出现问题。

是不是淡入淡出和动画只运行一次？我希望运行更多次，但仍然具有fadeIn，fadeOut和动画效果。

感谢您的回答。

$(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);
  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>

解决方法

说明：：由于所有元素都具有类似的事件绑定，因此我制作了/l*vx函数，从而减少了代码。 v函数接受回调函数作为参数，并在执行x时执行该函数。单击commonEvent时，其fadeOut属性设置为fadeOut。因此，我在回调函数中将其值改回了.box1，即初始值。

left

1200px

500px