javascript - list items to fade in and out one by one with jquery

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

Share Improve this question edited Nov 2, 2013 at 16:12 tshepang 12.5k25 gold badges98 silver badges139 bronze badges asked May 11, 2013 at 21:51 user2373802

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

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

There are several things wrong with your function:

You referenced the setTimeout function incorrectly (use changelist instead of changelist()).
setTimeout only calls once, so use setInterval instead.
You called the document ready function incorrectly (use $(document).ready(function () { or simply $(function () {
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

Programmer puzzle solving

javascript - list items to fade in and out one by one with jquery - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)