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

Question

这里是个新手。我的动画有点故障。我相信这是一个排队问题，但我只想要一个悬停/暂停效果，从我的阅读来看，我觉得我正在走上错误的解决方案。

The way I understand the queue is to handle a series of smaller animations to trigger at different time to achieve a larger effect. I've been doing large amounts of reading on this, but I feel this is the wrong solution for what I'm trying to achieve. My research is turning up hover over/animate up then hover off/animate down. I just want to resume the animation, so again I feel I'm heading down the wrong path on this. I'm trying very hard to find a native solution but am aware there are various plugins.

I've left the comments in to show where I've been. If it's preferred to have these stripped out, please do mention so I'll know for next time.

我想要实现的目标:悬停在上，幻灯片停止，悬停在外，幻灯片恢复。

我的问题:当鼠标反复悬停/移出时，动画速度会显着减慢。

我尝试过但效果有限或没有成功:

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

在这里找到 JS Fiddle: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,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/