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例子：http://jsfiddle.net/euroc5y9/1/

Answer 1

只需检查 animateBox-function 中的左侧位置：

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();
});

希望它有所帮助。

循环垂直li元素使用JQuery在div内部从左向右移动

1 个答案: