循环垂直李元素从左到右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(); 
}); 

希望它能帮助。