Question

我使用jQuery制作了幻灯片，一切都按预期工作......除了转换。截至目前，幻灯片播放通过我的div并添加/删除img，直到幻灯片放映结束（此时，幻灯片放映＆＃34;消失＆＃34;）。这一切都很好。但是，我希望过渡效果不那么刺耳。这是我到目前为止所做的。

HTML：

<div class="slideShow" id="slideshow">
<div class="showImg">
    <img src="http://paulmarique.be/dropbox/img/01.jpg" alt="" />
</div>
<div>
    <img src="http://paulmarique.be/dropbox/img/02.jpg" alt="" />
</div>
<div>
    <img src="http://paulmarique.be/dropbox/img/03.jpg" alt="" />
</div>

CSS：

 body {
  background-color: #e7e7e7;
  text-align: center;
}

.slideShow > div:not(.showImg) {
  display: none;
}

.showImg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.slideShow {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

jQuery的：

   $(function() {
     setTimeout(playSlideShow, 3000);

     function playSlideShow() {
       $('.showImg').removeClass('showImg').next('div').addClass('showImg');
   setTimeout(playSlideShow, 3000);
  }
 });

Codepen：http://codepen.io/anon/pen/vGYKrO

根本没有过渡。我不明白我做错了什么，但我确定有人会很快指出我的错误。任何帮助将不胜感激。

*注意：我应该补充一点，我不想为此使用任何插件。

Answer 1

两件事：

无法转换CSS display属性，无论是否。但是，您可以将visibility属性与opacity（例如）一起转换，以获得良好的过渡效果。提示：visibility的转换声明的持续时间为0ms，延迟时间取决于元素的状态。
您正在更改.showImg元素的CSS属性（通过更改元素的类），但您已将transition声明添加到.slideshow元素。您必须将transition属性应用于已更改CSS的元素。

幻灯片之间简单的jQuery幻灯片转换

1 个答案: