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