jqueryを使用して無限ループをアニメーション化する方法は？

Question

私は、実行中のテキストを実行するためにjquery animateを使用しようとしています。しかし、私はそれが無限ループで実行されるように見えることはできません。 https://jsfiddle.net/y9hvr9fa/1/

はそれを修正する方法を皆さん知っています：それは、常にこれはデモ..ですのみ

/* 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>

を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()水平スクロールが表示されたかのように、幅は幅がコンテンツとしてだけの長さであるので、あなたがscrollに設定したwidthを削除し、次の繰り返し

2. に変更されます - あなたは、TeXを保つためにwhite-space:nowrapを与えなければならないだろう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>

を使用しますありがとう！