どのように私はホバリングでjavascript（マーキー）を停止できますか？

Question

私がホバリングしたときにテキストが動かないようにしたい、そしてホバリングしていないときにテキストを再開したい。

これは、テキストを移動するために使用するjavascriptです。

$(document).ready(function() { 
    $('.scrollingtext').bind('marquee', function() { 
     var ob = $(this); 
     var tw = ob.width(); 
     var ww = ob.parent().width(); 
     ob.css({ right: -tw }); 
     ob.animate({ right: ww }, 30000, 'linear', function() { 
      ob.trigger('marquee'); 
     }); 
    }).trigger('marquee'); 
}); 

これは本文です。

<div class="scroller"> 
    <div class="scrollingtext"> 
     Moving text 
    </div> 
</div> 

Answer 1

stop()機能を使用してアニメーションを停止できます。ただし、アニメーションは完全に停止し、後で再作成する必要があります。要素をもう一度アニメートするには、（要素が既に特定のパスを終了しているため）時間の節約が必要です。したがって、同じ速度でアニメーションを終了するには、ミリ秒単位の時間を計算する必要があります。 hover()機能を使用すると、マウスオーバーイベントやマウスアウトイベントに反応することができます。変数の名前は変更しませんでしたが、意味のある変数名を使用することをお勧めします。 ob,wwおよびtwは意味がなく、従って維持できない。もちろん、私のコードスニペットはDRYのコンセプトに従って改善することができます。それは単なる概念の証明です。私はまた、なぜあなたはここでイベントを扱っているのか分からない。コードをリファクタリングしてmarqueeイベントを使用することはできません。ここで

$(document).ready(function() { 
    var ob = $('.scrollingtext'); 
    var speed = 10000; 

    ob.bind('marquee', function() { 
     var tw = ob.width(); 
     var ww = ob.parent().width(); 
     ob.css({ right: -tw }); 
     ob.animate({ right: ww }, speed, 'linear', function() { 
      ob.trigger('marquee'); 
     }); 
    }).trigger('marquee'); 

    ob.hover(function() { 
     ob.stop(); 
    }, function() { 
     var tw = ob.width(); 
     var ww = ob.parent().width(); 
     var cur = parseInt(ob.css('right'), 10); 
     var speedDecrease = 1 - ((cur + tw)/(ww + tw)); 
     ob.animate({ right: ww }, speedDecrease * speed, 'linear', function() { 
      ob.trigger('marquee'); 
     }); 
    }); 
}); 

はフィドルです：http://jsfiddle.net/59r7a2ka/2/