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

Question

我做了一个使用jQuery的幻灯片，并且一切都按预期工作...除了转换。截至目前，幻灯片通过我的div，并添加/删除imgs，直到幻灯片放映结束（此时，幻灯片“消失”）。这很好。但是，我希望让过渡效果不那么震撼。这是我迄今为止所拥有的。

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

两件事情：

1. 的CSS display财产不能转移，它要么是或不是。然而，您可以将visibility属性与opacity（例如）一起过渡，以获得良好的过渡效果。提示：visibility的过渡声明将有一个持续时间0ms和一个不同的延迟取决于元素的状态。
2. 您正在更改.showImg元素的CSS属性（通过更改元素的类），但是您已将transition声明添加到.slideshow元素。您必须将transition属性应用于其CSS已更改的元素。