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同时略微淡入 - 同时，当box2淡出时...框3正在淡入同一时间，不透明度从0到1

Answer 1

我很好，你呢？：'）。

我有一个可能有帮助的解决方案。您是否尝试过创建一个名为display的类并设置display: block;，然后将其作为toggleClass()放在函数上。最后，你创建了一个名为.transition的新类（我使用我的所有项目来完成它以使它们更容易）并将它放在div上或添加一些代码，如：$("div").addClass("transition");。

.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动画。定义每个框的类，然后制作一个动画并在每个动画上添加一个延迟，这样它就会显示每一个特定的时间，使它们无限，这样就会循环。

希望你明白：）

Answer 2

编辑jsFiddle的第14行以添加延迟创建更平滑的效果，这样您就不会同时看到两个。我猜这是问题的答案。

第14行编辑：to.delay(100).fadeIn(500, function () {

Jquery Fadein / FadeOut同时出现

2 个答案: