简单的jQuery幻灯片转换
提问于 2016-02-26 16:28:11
我使用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
它一点也不过渡。我不明白我做错了什么，但我肯定有人会很快指出我的一个愚蠢的错误。任何帮助都将不胜感激。
*注:我应该补充一点，我不想为此使用任何插件。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-26 16:34:26
有两件事：
- CSS
display属性不能转换，它是或不是。但是，您可以将visibility属性与opacity(例如)一起转换，以获得良好的转换效果。提示:根据元素的状态，visibility的转换声明将有一个持续时间为0ms，并有不同的延迟。 - 您正在更改
.showImg元素的CSS属性(通过更改元素上的类)，但是您将transition声明添加到.slideshow元素中。必须将transition属性应用于正在更改其CSS的元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35664162
复制
腾讯云开发者
