jqueryスライドスクロールを使用してテキストを左から右に移動

Question

私はこのテキストをスクロールするためのスクリプトを持っています。

window.requestAnimationFrame = (function(){ 
      return window.requestAnimationFrame  || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        function(callback){ 
         window.setTimeout(callback, 1000/60); 
        }; 
     })(); 

     var speed = 6000; 
     (function currencySlide(){ 
      var currencyPairWidth = $('.slideItem:first-child').outerWidth(); 
      $(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){ 
       $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first")); 
      }); 
      requestAnimationFrame(currencySlide); 
     })(); 

HTML

<div class='slider'> 
      <div class="edge"></div> 
      <ul class="slideContainer" id="money_start"> 
      <li class="slideItem"> 
      <span>Vestibulum ante ipsum primis in faucibus orci luctus</span> 
      </li> 
      </ul> 
     </div> 

問題：それは右から左にテキストをスクロールしているが、私は左から右にテキストをスクロールします。 ベストソリューションをお手伝いします。

Answer 1

このような意味ですか？それはより簡単に思える。 （あなたが尋ねたとして）

$('.slideItem').animate({right: 0}, 1000); 
 
$('.slideItem').animate({left: 0}, 1000);

.slideItem { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slideItem">TEXT</div>

Answer 2

数行が変更され、アニメーションは左から右に起こります。

window.requestAnimationFrame = (function() { 
 
     return window.requestAnimationFrame || 
 
       window.webkitRequestAnimationFrame || 
 
       window.mozRequestAnimationFrame || 
 
       function (callback) { 
 
        window.setTimeout(callback, 1000/60); 
 
       }; 
 
    })(); 
 

 
      var speed = 600; 
 
    (function currencySlide() { 
 
     var currencyPairWidth = $('.slideItem:first-child').outerWidth(); 
 
     $(".slideContainer").css("marginLeft", -currencyPairWidth + 500);//Added this line 
 
     $(".slideContainer").animate({ marginLeft: 75 }, speed, 'linear'); 
 
     requestAnimationFrame(currencySlide); 
 
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class='slider'> 
 
     <div class="edge"> 
 
     </div> 
 
     <ul class="slideContainer" id="money_start"> 
 
      <li class="slideItem"><span>Vestibulum ante ipsum primis in faucibus orci luctus</span> 
 
      </li> 
 
     </ul> 
 
    </div>