旋转内容在JQuery 1.11.0 -所有DIVs出现在刷新
旋转内容在JQuery 1.11.0 -所有DIVs出现在刷新
提问于 2014-05-02 18:44:49
我已经设置了一个示例页面以使这个旋转器脚本工作：http://twohatsconsulting.com/rotator/
唯一的问题是，当页面刷新时，所有三个DIV都会出现在第一个DIV中。
我的HTML代码：
<div class="parent">
<div class="child">
first
</div>
<div class="child">
second
</div>
<div class="child">
third
</div>
<div>我的JQuery代码：
var currentItem = -1;
var direction = 1;
$(document).ready(function(){
switchItem();
setInterval(switchItem, 5000);
});
function switchItem(){
currentItem = (currentItem+1) % ($(".parent .child").size());
// hide the visible one.
$(".parent .child:visible").fadeOut(500, function() {
//now that the hide is done, show the current one.
$(".parent .child").eq(currentItem).fadeIn(500);
});
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-02 19:47:53
这里的问题是，第一个fadeOut需要500毫秒。在前半秒，所有元素都是可见的。因为您的currentItem为-1，所以您可以使用它强制立即进行第一个更改。例如：
function switchItem(){
var interval = currentItem == -1 ? 0 : 500;
currentItem = (currentItem+1) % ($(".parent .child").size());
// hide the visible one.
$(".parent .child:visible").fadeOut(interval , function() {
//now that the hide is done, show the current one.
$(".parent .child").eq(currentItem).fadeIn(interval);
});
}这里有一个小提琴来演示它的外观
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23434910
复制相关文章
相似问题
腾讯云开发者
