How to create continuous scrollable content using jQuery.animate () function?

Question

Possible duplicate:
Implementing a circular scroller in jquery

I want to create a vertical scroller that will work just like a tent. But I want it to be continuous, for example, when we use the tent, all content is returned only after it is fully raised, but I want it to be continuous.

this is what i have ... http://jsfiddle.net/JWfaf/1/

I want only one direction and continue scrolling. Hope I cleared what I want to achieve.

HTML

<div class="con"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div>​ 

Javascript

 function animatethis(targetElement, speed) { $(targetElement).animate({ marginTop: "+=250px"}, { duration: speed, complete: function () { targetElement.animate({ marginTop: "-=250px" }, { duration: speed, complete: function () { animatethis(targetElement, speed); } }); } }); }; animatethis($('.con ul li:first-child'), 10000);​ 

Answer 1

Working demo: http://jsfiddle.net/rNXs9/1/

HTML:

 <div id="verticalScroller"> <div>1 Lorem ipsum dolor sit</div> <div>2 Lorem ipsum dolor sit</div> <div>3 Lorem ipsum dolor sit</div> <div>4 Lorem ipsum dolor sit</div> </div>​ 

CSS:

 #verticalScroller { position: absolute; width:52px; height: 180px; overflow: hidden; } #verticalScroller > div { position:absolute; width:50px; height:50px; }​ 

JS:

 window.verticalScroller = function($elem) { var top = parseInt($elem.css("top")); var temp = -1 * $('#verticalScroller > div').height(); if(top < temp) { top = $('#verticalScroller').height() $elem.css("top", top); } $elem.animate({ top: (parseInt(top)-60) }, 600, function () { window.verticalScroller($(this)) }); } $(document).ready(function() { var i = 0; $("#verticalScroller > div").each(function () { $(this).css("top", i); i += 60; window.verticalScroller($(this)); }); });​ 

Answer 2

Here you are beautiful sir.

The code

JS:

 function animatethis(targetElement, speed) { $(targetElement).animate({ marginTop: "300px"}, { duration: speed, complete: function () { $(targetElement).css('marginTop','-450px'); animatethis(targetElement, speed); } }); }; animatethis($('.con ul li:first-child'), 10000);​ 

CSS

 ul{display:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;} li{display:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;} .con{display:block;width:200px;height:300px;overflow:hidden;} 

HTML:

 <a href="#" class="click">click</a> <div class="con"> <ul> <li></li> <li></li> <li></li> <li></li> </ul></div>​