jquery Ticker

by Aakash Chakravarthy

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</div>

<span>Top move</span>
<bottom>Bottom move</bottom>

<app>Add</app>

CSS

div{
    position: relative;
    margin: 10px;
    border: 5px solid #333333;
    overflow: hidden;
}
ul{
    position: absolute;
}
li{
    border-bottom: 1px solid #00ccff
}

JavaScript

var k=4;
$('app').click(function(){
    $('ul').append('<li>' + (k++) + '</li>');
});

$('span').click(function(){
    var h = $('ul li:first').outerHeight();
    
    //$('ul li:first').fadeTo(0.5);
    
    $('ul').animate({
        'top': "-=" + h + "px"
    }, 'med', '', function(){
        $('ul li:first').hide().appendTo('ul').fadeIn();
        $(this).css('top', 0);
    });

});

$('bottom').click(function(){
    var h = $('ul li:last').outerHeight();
    
    $('ul').animate({
        'top': "+=" + h + "px"
    }, 'med', function(){
        $('ul li:last').hide().prependTo('ul').fadeIn();
        $(this).css('top', 0);
    });

});

var gg = function(){
    var h = $('ul li:first').outerHeight();
    /*$('ul li:first').fadeOut();*/
    
    $('ul').stop(true,true).animate({
        'top': "-=" + h + "px"
    }, 'med', function(){
        $('ul li:first').hide().appendTo('ul').fadeIn();
        $(this).css('top', 0);
    });
};

//var t=setInterval(gg,2000);

$('div').css({
    'height': '63'
});