Question

我想用jquery交叉淡化两个div。

如果我没有'具有以下约束条件，那就很容易（有点）：

1）背景div应始终可见。

2）顶部还有其他div，所以：没有z-index

3）它必须有响应，所以：没有宽度，没有高度

示例：

<DIV1><pic1><pic2><pic3><...><pic n></DIV1>
<DIV2><pic1><pic2><...><pic n></DIV2>

1）可见：DIV2（在DIV1之上） - >淡出DIV2

2）可见：DIV1 - > DIV2下一张图片

3）可见：DIV1 - > DIV2 fadein

4）可见：DIV2（在DIV1之上） - > DIV1下一张图片

5）可见：DIV2（在DIV1之上） - > DIV2淡出

重复直到DIV中的最后一张图像，然后从头开始。

你能帮我找一个优雅的解决方案吗？ Thnx提前！

Answer 1

以下是一种方法：

<div class="fadeContainer">
  <div class="item">1</div>
  <div class="item hidden">2</div>
  <div class="item hidden">3</div>
</div>

.fadeContainer {
  position: relative;
}
.item {
  position: absolute;
  opacity: 1;
  transition: opacity 2s;
}
.hidden { opacity: 0; }

$(document).ready(function() {
  var slideshow = setInterval(nextSlide, 2000);
});
function nextSlide() {
  var items = $(".item").length,
      $current;
  $(".item").each(function() {
    if(!$(this).hasClass("hidden") ) {
      $current = $(this).addClass("hidden");
    }
  });
  if($(".item").last()[0] === $current[0]) {
    // loop back to first if this is the last slide
    $(".item").first().removeClass("hidden");
  }
  $current.next(".item").removeClass("hidden");
}

CSSdeck example

具有约束的交叉渐变div

1 个答案: