javascript - 简单的 jQuery 幻灯片在幻灯片之间转换

Question

我使用 jQuery 制作了一个幻灯片，一切都按预期工作......除了过渡。截至目前，幻灯片通过我的 div 并添加/删除 img，直到幻灯片结束(此时，幻灯片“消失”)。这一切都很好。但是，我希望过渡效果不那么刺耳。这是我目前所拥有的。

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);
  }
 });

代码笔:http://codepen.io/anon/pen/vGYKrO

它根本不转换。 我不明白我做错了什么，但我相信有人会很快指出我的一个愚蠢错误。任何帮助将不胜感激。

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

Answer 1

两件事:

1. CSS display 属性不能转换，要么是，要么不是。但是，您可以将 visibility 属性与 opacity(例如)一起进行过渡，以获得不错的过渡效果。提示:visibility 的转换声明将有 0ms 的持续时间和不同的延迟，具体取决于元素的状态。
2. 您正在更改 .showImg 元素的 CSS 属性(通过更改元素的类)，但您将 transition 声明添加到 .slideshow 元素。您必须将 transition 属性应用于 CSS 已更改的元素。