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

Question

这里有点新手.我的动画有点故障.我认为这是一个排队问题,但我只是想要一个悬停/暂停效果,从我的阅读中我觉得我正朝着这个解决方案走错路.

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

我已经留下了评论,以显示我去过的地方.如果最好将这些剥离,请提及,以便下次我知道.

我想要实现的目标:徘徊,幻灯片停止,徘徊,幻灯片恢复.

我的问题:当反复鼠标移放时,动画会大大减慢.

我试过的有限或没有成功:

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,000ms.如果你中途暂停动画,你已经完成了一半的工作; 但是你仍然可以在恢复时给动画完成6,000ms,这就是它执行速度较慢的原因.

要解决这个问题,我们需要一点点:

您希望动画发生的速度(以像素/毫秒为单位,而不是更常规的km /小时)可以通过以下方式计算:

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/