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

Posted 2023-05-08

【中文标题】如何重复淡入淡出和动画？

【英文标题】：How repeat fade and animate?

【发布时间】：2021-01-28 03:02:27

【问题描述】：

我运行这段代码，它可以工作，但是当 $(".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>

【参考方案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>

【讨论】：

谢谢你为我解答。帮了很多忙，因为我是菜鸟代码

很高兴为您提供帮助。保持学习。并且不要忘记投票并将答案标记为正确。快乐编码:)