在JQuery中1.11.0旋转内容 - 所有div出现在刷新

Question

我已经成立了一个示例页面，使这个肩脚本工作： 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); 
    }); 
} 

Answer 1

这里的问题是第一淡出需要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); 
    }); 
} 

这里有一个fiddle演示了如何将看起来