Jquery-永无止境的滑块，速度问题

我做了一个永无止境的循环，标题从一边滑到另一边。当标题到达末尾时，它被放在队列的最后

问题是我的标题宽度不同。这将以具有不同动画速度的滑块结束。也许我的设置有误，但这是我的代码：

HTML:

JS:

JS小提琴

---

我通过添加一个变量修复了这个问题，并将其用作计算速度的源

var divide_to_get_time = (pos / 10000) * 50000;

然后将该变量放入持续时间中

最终代码：

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

    var divide_to_get_time = (pos / 10000) * 50000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : divide_to_get_time, complete : function(){
        $current_spot.next().addClass('active');
        $current_spot.appendTo('#spotlight');
        $('#spotlight').css({left : 0 + 'px'})
        $current_spot.removeClass('active');
        animate_spotlight();
    }});
}

---

找到一种改变持续时间的方法。在本例中，我将每个跨度的宽度除以1000，然后乘以持续时间，在本例中为8000

---

我很喜欢老的效果：）慢-慢-快-慢。@LukeDuddridge-哈哈，好吧…=）

$(window).load(function(){
        animate_spotlight();
});

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;
    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : 3000, complete : function(){
        $current_spot.next().addClass('active'); // Fetch new object
        $current_spot.appendTo('#spotlight'); // Put the old object last in #spotlight elem.
        $('#spotlight').css({left : 0 + 'px'}) // Reset the position
        $current_spot.removeClass('active'); // Removes active class of the old elem.
        animate_spotlight(); // Loop
    }});
}

var divide_to_get_time = (pos / 10000) * 50000;

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

    var divide_to_get_time = (pos / 10000) * 50000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : divide_to_get_time, complete : function(){
        $current_spot.next().addClass('active');
        $current_spot.appendTo('#spotlight');
        $('#spotlight').css({left : 0 + 'px'})
        $current_spot.removeClass('active');
        animate_spotlight();
    }});
}

function animate_spotlight(){
    var $current_spot = $('#spotlight span.active')
    var pos = $current_spot.next().position().left;

   var wid = $current_spot.width();
   var dur = (wid / 1000) * 8000;

    $('#spotlight').stop().animate({
        left : '-' + pos + 'px'
    }, {easing : 'linear', duration : dur, complete : function(){
    $current_spot.next().addClass('active');
    $current_spot.appendTo('#spotlight');
    $('#spotlight').css({left : 0 + 'px'})
    $current_spot.removeClass('active');
    animate_spotlight();
    }});
}