循環垂直李元素從左到右div內與jQuery

Question

我試圖做一個動畫，但我很難這樣做。這個想法是，在infite循環中將每個li的所有內容從左向右移動。

$(function() { 
var item_width = $('#slides li').outerWidth(true); 
var old_left = parseInt($('#slides ul').css('left')); 
var top_indent = old_left - item_width; 
var right_indent = item_width; 

var animateBox = function() { 
    $('#slides ul').animate({ 
     'top':top_indent, 
     'left':right_indent/2 

    },3700, function(){ 
     $('#slides li:last').after($('#slides li:first')); 
     $('#slides ul').css({'top':0}); 
     setTimeout(function() {animateBox(); }, 100); 
    }); 
} 
animateBox(); 
}); 

任何意見，將不勝感激。

這是的jsfiddle exampe：http://jsfiddle.net/euroc5y9/1/

Answer 1

只是檢查左側位置內animateBox功能：

Fiddle here.

$(function() { 
    var item_width = $('#slides li').outerWidth(true); 
    var old_left = parseInt($('#slides ul').css('left')); 
    var top_indent = old_left - item_width; 
    var right_indent = item_width; 
    var left = 0; 

    var animateBox = function() { 
     left = (left)? 0: (right_indent/2); 

     $('#slides ul').animate({ 
      'top':top_indent, 
      'left':left 

     },1500, function(){ 
      $('#slides li:last').after($('#slides li:first')); 
      $('#slides ul').css({'top':0}); 
      setTimeout(function() {animateBox(); }, 100); 
     }); 
    } 
    animateBox(); 
}); 

希望它能幫助。