如何使用Jquery .animate（）函数创建连续滚动内容？

可能重复：
在jquery中实现循环滚动条

我想创建垂直滚动条，它将像marquee一样工作。 但我希望它是连续的，就像当我们使用选框时，整个内容只有在它完全上升后才会回来，但我希望它是连续的。

这就是我所拥有的…… http://jsfiddle.net/JWfaf/1/

我只希望在一个方向上继续滚动。 我希望我已经清除了我想要实现的目标

HTML

 
 
 
 
 
 
 
​ 

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

工作演示： http ： //jsfiddle.net/rNXs9/1/

HTML：

 
 
1 Lorem ipsum dolor sit
 
2 Lorem ipsum dolor sit
 
3 Lorem ipsum dolor sit
 
4 Lorem ipsum dolor sit
 
​ 

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

先生，您很高兴。

代码

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：

 click 
 
 
 
 
 
 
​