如何使用jquery设置无限循环的动画？

Question

我一直在尝试使用jquery动画来执行正在运行的文本。但我似乎无法让它无限循环地运行。它总是只运行一次..

/* js: */ 
 

 
$(document).ready(function(){ 
 
    function scroll() { 
 
    $('.scroll').animate({ 
 
     right: $(document).width() 
 
    }, 8000, scroll); 
 
    } 
 
    scroll(); 
 
});

/* css： */ 
 

 
.scroll { 
 
    position: absolute; 
 
    right: -200px; 
 
    width: 200px; 
 
}

<!-- html: --> 
 

 
<div class="scroll">This text be scrollin'!</div>

此为演示： https://jsfiddle.net/y9hvr9fa/1/

你们是否知道如何解决它？

Answer 1

CSS备选：

另外，您可以在此CodePen使用CSS转换，如： https://codepen.io/jamesbarnett/pen/kfmKa

更先进：

$(document).ready(function(){ 
 
    var scroller = $('#scroller'); // scroller $(Element) 
 
    var scrollerWidth = scroller.width(); // get its width 
 
    var scrollerXPos = window.innerWidth; // init position from window width 
 
    var speed = 1.5; 
 
    scroller.css('left', scrollerXPos); // set initial position 
 
    
 
    function moveLeft() { 
 
    \t if(scrollerXPos <= 0 - scrollerWidth) scrollerXPos = window.innerWidth; 
 
    \t scrollerXPos -= speed; 
 
     scroller.css('left', scrollerXPos); 
 
     window.requestAnimationFrame(moveLeft); 
 
    } 
 
\t \t window.requestAnimationFrame(moveLeft); 
 
});

.scroll { 
 
    display: block; 
 
    position: absolute; 
 
    overflow: visible; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="scroller" class="scroll">This text be scrollin'!</div>

肮脏的解决方案（我原来的答复）：

文本运行到左边没有人停下：

在这个例子中，这将是速战速决。在这里你会告诉文本总是从那个位置开始。 （时间已经跑起来之后 - 这意味着不一定只是当它已经离开了屏幕）

$(document).ready(function(){ 
    function scroll() { 
     $('.scroll').css('right', '-200px').animate({ 
     right: $(document).width() 
     }, 8000, scroll); 
    } 
    scroll(); 
}); 

Answer 2

所以这是我做过什么：

1. 预先计算$(document).width()仿佛出现水平滚动时，宽度将在下次迭代

2. 更改取消已设置scroll的width，使宽度仅为只要内容 - 你将不得不给white-space:nowrap保持TEX t在一行中。

3. 在animate使用使用$('.scroll').outerWidth()

观看演示低于scroll文本的宽度和update fiddle here

$(document).ready(function() { 
 
    
 
    // initialize 
 
    var $width = $(document).width(); 
 
    var $scrollWidth = $('.scroll').outerWidth(); 
 
    $('.scroll').css({'right': -$scrollWidth + 'px'}); 
 
    
 
    // animate 
 
    function scroll() { 
 
    $('.scroll').animate({ 
 
     right: $width 
 
    }, 8000, 'linear', function() { 
 
     $('.scroll').css({'right': -$scrollWidth + 'px'}); 
 
     scroll(); 
 
    }); 
 
    } 
 
    scroll(); 
 
});

body { 
 
    overflow: hidden; 
 
} 
 
.scroll { 
 
    position: absolute; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scroll">This text be scrollin'!</div>

让我知道这是你的意见，谢谢！