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 () {/p>

4. 您在 changeList 函数中的逻辑是错误的(例如，list_slideshow.length === length 将始终为 false)。

以下代码按照我认为的方式循环遍历列表项(尽管您可能希望根据需要更改时间):

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

See a demo