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這里

但是我嘗試將其擴展一點，當方框1淡出時，您可以看到方框2同時略微變暗-同時，隨着box2淡出...方框3隨即變淡不透明度從0變為1

Answer 1

我很好，你呢？ ：'）。

我有一個可能會有所幫助的解決方案。 您是否嘗試過制作1個名為display和setting display: block; 然后將其作為toggleClass()放在函數上。 最后，您創建一個名為.transition的新類（我對我的所有項目都這樣做以使它們更容易），然后將其放在div上，或使用諸如$("div").addClass("transition");這樣的代碼添加$("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動畫。 定義每個框的類，然后制作一個動畫，並在每個動畫上添加一個延遲，以使它每隔一定的時間顯示一次，使它們無限遠，從而使will循環。

希望你能理解 ：）

Answer 2

編輯jsFiddle的第14行以添加延遲會創建更平滑的效果，因此您不會一次看到兩個。 我想這就是問題的答案。

第14行編輯： to.delay(100).fadeIn(500, function () {