如何使用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>

讓我知道這是你的意見，謝謝！