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

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.

我想要实现的：徘徊,幻灯片停止,悬停,幻灯片恢复.

我的问题：当鼠标多次重复播放时,动画效果会相当缓慢.

我试过有限或没有成功：

清除队列并将结果输出到控制台,仍然会减慢
下.
>将左位置值设置为当前左值,否
运气.
队列柜台应该是准确的
幻灯片.

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},'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>

var speed = Math.abs(animation / 6000);

function animateMe() {
    var el = $('.w-multi');
    var distance = Math.abs(animation - el.position().left);
    var time = distance / speed;

    el.animate({
        left: animation
    },time,function () {
        $('.w-multi').css('left',0);
        animateMe();
    });
}