Возобновленная анимация медленна после паузы, используя stop()

Немного новичков здесь. У меня небольшая анимация. Я считаю, что это проблема с очередью, но мне просто нужен эффект зависания/паузы, и из моего чтения я чувствую, что я направляюсь к неправильному пути для этого решения.

Как я понимаю, очередь состоит в том, чтобы обрабатывать серию меньших анимаций, чтобы запускать в разное время, чтобы добиться большего эффекта. Я делал большое количество чтения об этом, но я считаю, что это неправильное решение для того, чего я пытаюсь достичь. Мое исследование поднимает зависание над/анимировать, а затем зависнет/опустится. Я просто хочу возобновить анимацию, так что снова я чувствую, что я иду по неверному пути. Я очень стараюсь найти собственное решение, но знаю, что есть различные плагины.

     

Я оставил комментарии, чтобы показать, где я был. Если он предпочел бы, чтобы они были удалены, пожалуйста, укажите, что я буду знать в следующий раз.

То, что я хотел бы достичь: наведение, слайд-шоу останавливается, выключение, слайд-шоу возобновляется.

Моя проблема. При многократном повторном запуске анимации анимация значительно замедляется.

Что я пробовал с ограниченным успехом или без успеха:

  • Удаление очереди и вывод результатов на консоль все еще замедляется вниз.
  • Установка значения левой позиции в текущее левое значение, no удачи.
  • Счетчик очереди должен быть точным, что ниже слайд-шоу.

JS Fiddle Found Here: 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>

Ответы

Ответ 1

Во-первых, +1 для большого подробного вопроса.

Проблема в том, что вы всегда даете анимации 6 000 мс для завершения. Если вы приостановите анимацию наполовину, вы уже сделали половину работы; но вы все равно даете анимацию 6 000 мс для завершения при возобновлении, поэтому она работает медленнее.

Чтобы исправить это, нам нужно немного:

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/