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

Jquery - 永不停止滑块，速度问题

2 个答案: