停止（）を使用して再開したアニメーションが遅い

Question

初心者のビットです。私はわずかに機能していないアニメーションを持っています。私はキューイングの問題だと思っていますが、ホバー/ポーズの効果がほしいだけです。私の読書から、私はこの解決策の間違った方向に向かっていると感じています。

私はキューを理解する方法は、より大きな効果を達成するために、異なる時間にトリガするために小さな一連のアニメーションを処理することです。私はこれについて大量の読書をしてきましたが、これは私が達成しようとしていることに対する間違った解決策であると感じています。私の研究は、ホバーオーバー/アニメーションアップ、ホバーオフ/アニメーションダウンを上げています。私はちょうどアニメーションを再開したいので、やはり私はこれについて間違った方向に向かっていると感じています。私はネイティブソリューションを見つけるのが非常に難しいですが、さまざまなプラグインがあることを認識しています。

私はどこに行ったかを示すためにコメントを残しました。これらを取り除くことが望ましい場合は、次回のためにお伝えください。私はが達成したい何

：、スライドショーが停止し、上のホバーリングアウトホバリングは、スライドショーが再開されます。

私の問題：マウスオーバー/アウトを繰り返すと、アニメーションがかなり遅くなります。私は限られた、あるいはまったく成功で試してみた何

：

1. キューをクリアし、その結果をコンソールに出力するには、それはまだ ダウンが遅くなります。
2. 左の位置の値を現在の左の値に設定すると、 運がありません。
3. キューカウンタは、正確には 以下のスライドショーである必要があります。

JSフィドルここ見つかり：http://jsfiddle.net/qWQCQ/
JSフィドルここストップ値で：http://jsfiddle.net/qWQCQ/1/

コードサンプル下：

Javascriptを：

$("document").ready(function(){ 

//----------------------------------------CONFIG-------------------------------------------------------------- 

var resetNum = 0;//FOR RESET PURPOSE 
var itemRightMargin = 10;//YOUR MARGIN VALUE 
var itemWidth = 100;//WIDTH OF YOUR IMAGES, NOT INCLUDING M/P 

//----------------------------------------END CONFIG---------------------------------------------------------- 



$('.w-slides .first').clone().appendTo('.w-slides').removeClass('first').addClass('last'); 

var clipWidth = (itemRightMargin+itemWidth)*$('.w-slides li').length; 
var containerWidth = clipWidth-itemRightMargin; 
var clipCapacity = $('.w-slides li').length; 
var animation = (containerWidth*-1)+itemWidth; 

//SET THE STRUCTURE 
$('.w-slideshow').css('width', itemWidth); 
$('.w-multi').css('width', containerWidth); 
$('.w-slides').css('width', clipWidth); 
$('.w-slides li').css({'float':'left', 'width':itemWidth, 'margin-right':itemRightMargin+'px'}); 

$('.w-slides li:last').css('margin-right', 0); 
$('.w-slideshow, .w-multi').css({'padding':resetNum}); 
$('.w-multi').css({'margin':resetNum}); 

function animateMe(){ 
$('.w-multi').animate({left:animation}, 6000, 'linear', function() 
    { 
     $('.w-multi').css('left', 0); 
     animateMe(); 
    }); 
} 

$('.w-multi').hover(function(){ 
     $(this).stop(false, false); 
     //$(this).stop().animate({left:animation}, 6000, 'linear'); 
     //var thisPosition = $(this).css('left'); 
     //alert(thisPosition); 
     //$(this).css('left',thisPosition); 
     var queueNum = $('.w-multi').queue('fx').length; 
     //(function(){console.log($(this).queue('fx').length);}); 
     $('#queue').html(queueNum); 
     //$(this).queue(function(){console.log($(this).queue('fx').length);}); 
}, 
function(){ 
     animateMe();  
    }); 

animateMe(); 
}); 

HTML：まず

<div> 
    <div class="w-slideshow"> 
     <div class="w-multi"> 
     <ul class="w-slides"> 
      <li class="first"><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-1.jpg" /></a></li> 
      <li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-2.jpg" /></a></li> 
      <li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-3.jpg" /></a></li> 
      <li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-4.jpg" /></a></li> 
      <li><a href="#"><img src="http://www.littleredplanedesign.com/labs/rotator/rotator-images/xmen-5.jpg" /></a></li> 
     </ul> 
     </div> 

    </div> 
    <div id="queue" style="width:150px; margin:0 auto; margin-top:20px;">Num of items in queue = </div> 
</div> 

Answer 1

^{、素晴らしい、詳細な質問の1。}

---

問題は、常に完了するために、アニメーション6,000msを与えているということです。アニメーションを途中で一時停止すると、すでに半分の作業が完了しています。しかし、あなたはまだアニメーションを6,000msに渡して再開することができます。そのため、パフォーマンスは遅くなります。

は、この問題を解決するために、我々はこの少しを必要とする：

あなたはアニメーションが（ピクセル単位/ミリ秒というよりも、従来キロ/時で発生したい速度）、を経由して計算することができます。

var speed = Math.abs(animation/6000); 

次に、あなたのanimateMe機能は、アニメーションが移動しなければならないどのくらいに基づいて、アニメーションが完了するまでの時間を計算するために更新する必要があり、静的なスピード：

function animateMe() { 
    var el = $('.w-multi'); 
    var distance = Math.abs(animation - el.position().left); 
    var time = distance/speed; 

    el.animate({ 
     left: animation 
    }, time, 'linear', function() { 
     $('.w-multi').css('left', 0); 
     animateMe(); 
    }); 
} 

これはここで見ることができます：http://jsfiddle.net/qWQCQ/3/