JQuery Fade Ticker Neat and Tidy

Question

Experimenting with my own ticker and have run out of JQuery knowledge. The elements are supposed to fade out then the next one fades in. At the moment the first element fades out whilst the second and third fade in together and their is no loop. Obviously I have missed something.

<script type="text/javascript">
var elem1 = $('#fader').children();
    $(elem1).hide();
    $(elem1).first().fadeIn(2000,function(){
        $(elem1).delay(4000);

        $(elem1).fadeOut(2000, function(){
            $(elem1).next().fadeIn(2000);

            });
            }); </script>

Any ideas?

Marvellous

Answer 1

Well, I made a simple tinker that scrolls all the values and stop. Maybe it's what you're looking for, or, at least, can help you build yours. ;) Here is it's HTML code:

<div id="fader" style="width:100px; height:100px; background-color:blue;">
    <p>aaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbb</p>
    <p>cccccccccccc</p>
    <p style="display:none;">dddddddddddd</p>
    <p style="display:none;">eeeeeeeeeeee</p>
    <p style="display:none;">ffffffffffff</p>
    <p style="display:none;">gggggggggggg</p>
</div>

The script itself:

<script type="text/javascript">
$(document).ready(function()
{
    var timer = window.setInterval(function()
    {
        var elem1 = $('#fader').children(':visible:first');
        var elem2 = $('#fader').children(':visible:last');

        if( !$(elem2).next().is(':last') )
            clearInterval( timer );
        else
        {
            $(elem1).fadeOut(1500, function()
            {
                $(elem2).next().fadeIn(1500);
            });
        }
    }, 3000);
});
</script>

Good luck! ;D