13

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

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

我留下评论以显示我去过的地方。如果希望将这些剥离，请务必提及，以便我下次知道。

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

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

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

  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>
4

1 回答 1

5

首先，+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/

于 2013-04-18T15:46:20.853 回答