Jquery - 永不结束滑块，速度问题

Question

我做了一个永无止境的循环，标题从一边滑到另一边。当标题达到最后时，它将排在最后。

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

HTML：

<header> 
    <div id="spotlight"> 
    <span class="active">Foo</span> 
    <span>Baaaar</span> 
    <span>Baaz</span> 
    <span>baz</span> 
    <span>qux</span> 
    <span>quux</span> 
    <span>corge</span> 
    <span>grault</span> 
    <span>garply</span> 
    <span>waldo</span> 
    </div> 
</header> 

CSS：

body { 
    background: #000; 
} 

header { 
    border-bottom: 8px solid white; 
    height: 300px; 
    margin-bottom: 4%; 
    overflow: hidden; 
    position: relative; 
} 
header #spotlight { 
    left: 0; 
    position: absolute; 
    width: 1100%; 
} 
header #spotlight span { 
    color: white; 
    display: block; 
    float: left; 
    font-size: 6em; 
    font-weight: 900; 
    margin-top: 1%; 
    text-transform: uppercase; 
} 
header #spotlight span { 
    margin-left: 30px; 
} 
header #spotlight span:not(:last-child):after { 
    content: "•"; 
    margin-left: 30px; 
} 

JS：

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

JS FIDDLE http://jsfiddle.net/7BMaF/2/

Answer 1

我通过添加一个变量来解决此问题，并将其用作计算速度的来源。

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

Answer 2

找到一种方法来改变时间。在这种情况下，我除以1000每个跨度的宽度，然后通过时间乘以它，在这种情况下，8000

http://jsfiddle.net/axrwkr/7BMaF/4

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