Scrolling

by alpacalips

HTML

<div id="cycler">      
    <div>A</div>        
    <div>B</div>        
    <div>C</div>        
    <div>D</div>        
    <div>E</div>        
    <div>F</div>        
    <div>G</div>        
    <div>H</div>        
    <div>J</div>      
</div>

CSS

#cycler{
    height:5em;
    overflow:hidden;
    border:1px solid gray;
}

JavaScript

function cycle($item, $cycler){
    setTimeout(cycle, 2000, $item.next(), $cycler);
    
    $item.slideUp(1000,function(){
        $item.appendTo($cycler).show();        
    });
    
}

cycle($('#cycler div:first'),  $('#cycler'));