javascript - 简单的jQuery幻灯片在幻灯片之间过渡

我已经使用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);
  }
 });

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

它根本不会过渡。
我不明白自己在做什么错，但是我敢肯定有人会很快指出我这是一个愚蠢的错误。任何帮助将不胜感激。

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

最佳答案

两件事情：


CSS display属性不能转换，它是或不是。但是，您可以将visibility属性与opacity一起转换（例如）以获得良好的转换效果。提示：visibility的过渡声明的持续时间为0ms，并且根据元素的状态而有所不同。
您正在更改.showImg元素的CSS属性（通过更改元素上的类），但是您已在transition元素中添加了.slideshow声明。您必须将transition属性应用于更改了CSS的元素。