jquery - 在 JQuery 1.11.0 中旋转内容 - 所有 DIV 都会在刷新时出现

Question

我已经设置了一个示例页面来使这个 rotator 脚本工作： 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

这里的问题是第一个 fadeOut 需要 500 毫秒。在前半秒内，所有元素都是可见的。由于您从 -1 的 currentItem 开始，您可以使用它来强制第一次更改立即发生。例如：

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);
  });
}

这是一个小提琴来演示它的外观