使用 stop() 暂停后恢复动画很慢

Question

这里有点新手。我有一个轻微故障的动画。我相信这是一个排队问题，但我只想要一个悬停/暂停效果，从我的阅读中我觉得我正在朝着这个解决方案的错误方向前进。

我理解队列的方式是处理一系列较小的动画在不同的时间触发，以达到较大的效果。我一直在做大量的阅读，但我觉得这是我想要实现的错误解决方案。我的研究是悬停/动画然后悬停/动画向下。我只是想恢复动画，所以我再次觉得我走错了路。我正在努力寻找本机解决方案，但我知道有各种插件。

我把 cmets 留在里面是为了显示我去过的地方。如果希望将这些剥离出来，请务必提及，以便我下次知道。

我想要实现的目标：悬停，幻灯片停止，悬停，幻灯片恢复。

我的问题：当鼠标反复悬停/移出时，动画会变慢。

我尝试的方法有限或没有成功：

1. 清除队列并将结果输出到控制台，它仍然很慢 下。
2. 将左侧位置值设置为当前左侧值，否 运气。
3. 队列计数器应该是准确的，低于 幻灯片。

JS Fiddle 在这里找到：http://jsfiddle.net/qWQCQ/
JS Fiddle 在这里找到停止值：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,000 毫秒的时间来完成。如果你将动画暂停一半，你已经完成了一半的工作；但是您仍然需要 6,000 毫秒才能在恢复时完成动画，这就是它执行速度较慢的原因。

要解决这个问题，我们需要一点：

您希望动画发生的速度（以像素/毫秒而不是更传统的公里/小时为单位）可以通过以下方式计算：

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/