Question

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

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

我已经留下了评论，以显示我去过的地方。如果最好将这些删除，请提及我下次知道。

我想要实现的目标：停留，幻灯片播放停止，悬停，幻灯片继续播放。

我的问题：反复鼠标移动/移出时，动画会大幅减慢。

我尝试过但有限或没有成功：

清除队列并将结果输出到控制台，它仍然会变慢下。
将左侧位置值设置为当前左侧值，否运气。
队列计数器应该精确到低于幻灯片放映。

JS Fiddle Found here Here ：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,000ms，这就是为什么它的表现较慢。

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

enter image description here

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

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/

使用stop（）暂停后恢复的动画很慢

1 个答案: