Resumed animation is slow after pausing using stop()

Question

Bit of a newbie here. I've an animation that's malfunctioning slightly. I believe it's a queuing issue, but I just want a hover/pause effect, and from my reading I feel I'm heading down the wrong path for this solution.

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.

What I'd like to achieve: Hovering on, slideshow stops, Hovering out, slideshow resumes.

My problem: When mousing over/out repeatedly, the animation slows considerably.

What I've tried with limited or no success:

1. Clearing the queue and outputting results to console, it still slows down.
2. Setting the left position value to it's current left value, no luck.
3. The queue counter should be accurate that's below the slideshow.

JS Fiddle Found Here: http://jsfiddle.net/qWQCQ/
JS Fiddle with stop values here: http://jsfiddle.net/qWQCQ/1/

Code Samples Below:

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

^{Firstly, +1 for a great, detailed question.}

---

The problem is that you're always giving the animation 6,000ms to complete. If you pause the animation half way, you've already done half the work; but you still give the animation 6,000ms to complete upon resuming, which is why it's performing slower.

To fix this, we need a little bit of this:

The speed at which you want the animation to occur at (measured in pixels/ millisecond rather than the more conventional km/hour), can be calculated via:

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

Then your animateMe function needs to be updated to calculate the time for the animation to complete, based on how far the animation has to travel, and the static speed:

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();
    });
}

This can be seen here: http://jsfiddle.net/qWQCQ/3/