停止使用stop（）後恢復的動畫很慢

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/