I have a set of list items, and I need them to fade out and (the next one) fade in seamlessly. Here is my (not working) code:

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

I have a set of list items, and I need them to fade out and (the next one) fade in seamlessly. Here is my (not working) code:

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

• javascript
• jquery
• css
• list

• 1 Which part doesn't work? – dsgriffin Commented May 11, 2013 at 21:54
• if this is all your code, its missing the $( at the beginning... – crackmigg Commented May 11, 2013 at 21:54
• var list_slideshow is global variable to your function changeList, you dont need to define it again inside. – Mithun Satheesh Commented May 11, 2013 at 21:56

1 Answer 1

There are several things wrong with your function:

1. You referenced the setTimeout function incorrectly (use changelist instead of changelist()).

2. setTimeout only calls once, so use setInterval instead.

3. You called the document ready function incorrectly (use $(document).ready(function () { or simply $(function () {

4. Your logic in the changeList function was wrong (e.g., list_slideshow.length === length will always be false).

The following code loops through list items as I think you intend (although you might want to alter the timings as you see fit):

$(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