jquery scroll animation не работает

Question

Я реализую бесконечную прокрутку с помощью jquery, и здесь весь элемент списка представляет собой данные из базы данных. все работает хорошо, но мой скроллер не прокрутка с анимацией его внешний вид, как его просто прыгать, как я мог сделать это анимировать не прыгать! ... пожалуйста

[Jquery]

var item_width = $('.scroller li').outerWidth(); 
var left_value = item_width * (-1); 
$('.scroller li:first').before($('.scroller li:last')); 
$('.scroller').css({'left' : left_value}); 

$('#prev').click(function() { 
    var left_indent = parseInt($('.scroller').css('left')) - item_width; 
    $('.scroller').animate({'left' : '-='+left_indent}, 400, function(){ 
     $('.scroller li:first').before($('.scroller li:last')); 
     $('.scroller').css({'left' : left_value}); 
    }); 
    return false; 
}); 

$('#next').click(function() { 
    var left_indent = parseInt($('.scroller').css('left')) - item_width; 
    $('.scroller').animate({'left' : '+='+left_indent}, 400, function() { 
     $('.scroller li:last').after($('.scroller li:first')); 
     $('.scroller').css({'left' : left_value}); 
    }); 
    return false; 
}); 

[Стиль]

*{margin: 0;padding: 0;list-style: none;} 
.scroller{height:70px;overflow:hidden;} 
.scroller li{float:left;display:inline-block;position:relative;border-bottom:1px solid #e8eef4;border-top:1px solid #e8eef4;border-right:1px solid #ddd;height:70px;width:25%;cursor:pointer; 
    background-image: -moz-radial-gradient(top, #fff, #ddd);} 
.scroller li:nth-child(4),.scroller li:nth-of-type(4){border-right:0} 
.scroller li a{display:block;margin-top:8%;height:90%;font-size:x-small;text-align:center;} 
.scroller .active,.scroller li:hover{background-image:-moz-radial-gradient(top, #ddd, #fff)} 
.scroller .active:before{content:'';height:0;position:absolute;top:-1px;width:0;left:42%;border: 10px solid transparent;border-top-color:#fff;z-index:100} 
.scroller li a img{border:1px solid #ccc;width:80%;height:40%} 

[Html]

<div> 
    <ul class="scroller"> 
     <li class="item">01</li> 
     <li class="item">02</li> 
     <li class="item">03</li> 
     <li class="item">04</li> 
     <li class="item">05</li> 
     <li class="item">06</li> 
     <li class="item">07</li> 
     <li class="item">08</li> 
     <li class="item">09</li> 
     <li class="item">10</li> 
    </ul> 
    <p class="tar"><a href="javascript:void(0);" id="prev">&lsaquo;</a><a href="javascript:void(0);" id="next">&rsaquo;</a></p> 
</div> 

Answer 1

Вы можете использовать lucid.js, они проделали большую работу, и я думаю, что я t может сэкономить ваше время. У них есть хороший API, который позволяет вам выбирать элементы, которые вы хотите прокрутить, или даже всю страницу.

Пожалуйста, дайте мне знать, если это поможет вам.

вот ссылка для документаций и демоса: http://ataredo.com/morphology/lucidscroll/