ad ticker

by Ashish Kasama

HTML

<div id="ticker">
    <div>
        <img src="http://placekitten.com/200/800"/>
        <img src="http://placekitten.com/200/250"/>
        <img src="http://placekitten.com/200/500"/>
        <img src="http://placekitten.com/200/375"/>
        <img src="http://placekitten.com/200/250"/>
   </div>
</div>

CSS

#ticker {
    height: 340px;
    overflow: hidden;
}

#ticker div {
    position: relative;
    padding: 10px;
    top: 0px;
}

#ticker div img {
    display: block;
    margin:10px;
}

JavaScript

setInterval(

function() {
    $('#ticker div').each(function() {
        $(this).animate({
            'top': '-=10px'
        }, 50, function() {
            var top = parseInt($(this).css('top').replace('px', '')) +
                  parseInt($(this).css('height').replace('px', ''));
            if (top < 300) {
                //console.log('removing', this)
                var clone = $(this).clone();
                var parent = $(this).parent();
                clone.css('top', '0px');
                $(this).remove();
                parent.append(clone);
            }
        })
    })}
    , 10)