垂直JavaScript轮播

Question

I am trying to write a simple vertical JavaScript carousel that'll rotate a couple of elements. It works quite well but I am having a hard time figuring out how to keep the amount of elements. As you can see in this JSFiddle, http://jsfiddle.net/xznfQ/2/ , the first one is "queued" away and reappears after a round. Can anyone tell me what I am doing wrong?

I guess something is wrong with these two lines:

$(e).eq(1).slideUp('slow'); // Slide next element up over the previous $(e).eq(1).slideUp('slow'); // Slide next element up over the previous $(e).eq(0).appendTo(a).show('slow'); // Place the current element at the bottom $(e).eq(0).appendTo(a).show('slow'); // Place the current element at the bottom

Kind regards,

Mathias.

Answer 1

You want to hide the first element, e(0) and only after that move it to the end! You want:

    $(e).eq(0).slideUp('slow', function () {
        $(e).eq(0).appendTo(a).show('slow');
    });

Your code:

$(e).eq(1).slideUp('slow');

Slowly hides the element and returns immediately. Then:

$(e).eq(0).appendTo(a).show('slow');

Moves the first element to the end immediately and slowly shows it. This meant you had the second element disappearing and the first element appearing at the end. So the list had one hidden at all times.