javascript - Jquery Fadein/FadeOut 同时进行

Question

你好吗？ 这是来自以前的帖子，并发布了一个解决方案。

JS:

$(document).ready(function() {
  var allBoxes = $("div.boxes").children("div");
  transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
  function next() {
    var nextTo;
    if (to.is(":last-child")) {
      nextTo = to.closest(".boxes").children("div").first();
    } else {
      nextTo = to.next();
    }
    to.fadeIn(500, function() {
      setTimeout(function() {
        transitionBox(to, nextTo);
      }, 5000);
    });
  }
  if (from) {
    from.fadeOut(500, next);
  } else {
    next();
  }
}

JSFIDDLE HERE

但是我试图稍微扩展一下，当方框 1 淡出时，您可以看到方框 2 同时略微淡入 - 同时，随着方框 2 淡出...方框 3 在同时不透明度从 0 变为 1

Answer 1

我很好，你呢？ :') .

我有一个可能有用的解决方案。 您是否尝试过制作 1 个名为 display 的类并设置 display: block; 然后将其作为 toggleClass() 放在函数上。最后你创建一个名为 .transition 的新类(我对我的所有元素都这样做是为了使它们更容易)并将它放在 div 上或添加一些代码，如:$("div").addClass("过渡");.

.transition 的代码应该是这样的:

.transition {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

您也可以尝试仅使用 CSS 代替 CSS 和 jQuery。 一个例子可能是使用 CSS 动画。定义每个盒子的类，然后制作动画并在每个动画上添加延迟，以便它每隔一定时间显示一次，使它们无限循环。

希望你明白:)