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

您的功能有几个问题：

您错误地引用了setTimeout功能（使用changelist代替changelist()）。
setTimeout只拨打一次，因此请改用setInterval。
您错误地调用了文档就绪功能（使用$(document).ready(function () {或只是$(function () {
您在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

列出用jquery逐个淡入淡出的项目

1 个答案: