jquery fadeIn fadeOut 幻灯片不加载下一个元素

Question

我正在尝试做基于 jquery 的幻灯片放映，我有：

对于 html：

<ul id="main_ul">
    <li><img src="images/image1.jpg"></li>
    <li><img src="images/image2.jpg"></li>
    <li><img src="images/image3.jpg"></li>
</ul>

对于 CSS：

#main_ul li {
position:relative;
left:0;
top:0;
list-style-type: none;
width:1000px;
height:524px;
padding: 0;
}

#main_ul {
position: relative;
width:1000px;
height:524px;
padding: 0;
}

对于 JS：

   $(document).ready(function(){

      $("#main_ul li:gt(0)").hide();

      setInterval(function(){

         $("#main_ul :first-child").fadeOut().next("li").fadeIn().end().appendTo("#main_ul");
      }, 3000);
   });

看起来下一个 li 元素没有淡入。 大家有什么建议吗。

P

Answer 1

编辑：

重新阅读您的问题后，我现在看到了实际问题。下一张幻灯片正在淡入，但在淡入淡出期间它被撞到了视野之外。这是因为您有两个可见元素同时使用相对定位淡入淡出，因此一个会碰撞另一个直到淡出。它在较小的尺寸下更明显，例如这个小提琴：http://jsfiddle.net/Bcup4/

我的建议是使用fadeOut 的回调函数。这将确保在淡入开始之前淡出已经完成。它会是这样的：

$("#main_ul :first-child").fadeOut( 1000, "linear" function() {
    // Put fadeIn code here
});

$("#main_ul :first-child").fadeOut().next("li").fadeIn().end().appendTo("#main_ul");

您的代码是说“在#main_ul 中的第一个孩子中找到下一个 li”。您应该淡出第一个元素，追加它，然后使用新选择器开始第二行以获取下一个元素（现在将是第一个元素）。