javascript - 使用jquery一一列出要淡入淡出的项目

Question

我有一组列表项，我需要它们淡出和（下一个）无缝淡入。这是我的（不工作）代码：

    document.ready(function(){

        var list_slideshow = $("#site_slideshow_inner_text");
        list_slideshow.children("li:not(:first)").hide();
        // here begins the function
        function changeList(){
        var list_slideshow = $("#site_slideshow_inner_text");       
        var length = 0;
            if(list_slideshow.length === length)
            {
                list_slideshow.children("li").eq(0).fadeOut(300, function()  
                            {
                $(this).next().fadeIn(300);
                });
            }
        }
        setTimeout(changeList(), 500);
});

Answer 1

您的功能有几处问题：

1. 您错误地引用了该setTimeout函数（使用changelist而不是changelist()）。

2. setTimeout只调用一次，所以setInterval改用。

3. 您错误地调用了文档就绪功能（使用$(document).ready(function () {或简单地$(function () {

4. 您在 changeList 函数中的逻辑是错误的（例如，list_slideshow.length === length总是错误的）。

以下代码按照我认为您的意图循环遍历列表项（尽管您可能希望根据需要更改时间）：

$(function () {
    var list_slideshow = $("#site_slideshow_inner_text"),
        listItems = list_slideshow.children('li'),
        listLen = listItems.length,
        i = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(300, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(300);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, 1000);
});

查看演示