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

Question

我运行这段代码有效，但是当 $(".box3").click 时，$(".box1") 不淡入和动画，它直接显示在 window。等$(".box2") 和$(".box3") 第二次出现问题后

难道淡入和动画只运行一次？我想要运行次，但仍然有淡入、淡出和动画效果。

感谢您的回答。

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

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

How repeat fade and animate?

javascript

jquery

animation

fadein

jquery-animate