jquery - Resumed animation is slow after pausing using stop() -

bit of newbie here. i've animation that's malfunctioning slightly. believe it's queuing issue, want hover/pause effect, , reading feel i'm heading down wrong path solution.

the way understand queue handle series of smaller animations trigger @ different time achieve larger effect. i've been doing large amounts of reading on this, feel wrong solution i'm trying achieve. research turning hover over/animate hover off/animate down. want resume animation, again feel i'm heading down wrong path on this. i'm trying hard find native solution aware there various plugins.

i've left comments in show i've been. if it's preferred have these stripped out, please mention i'll know next time.

what i'd achieve: hovering on, slideshow stops, hovering out, slideshow resumes.

my problem: when mousing over/out repeatedly, animation slows considerably.

what i've tried limited or no success:

1. clearing queue , outputting results console, still slows down.
2. setting left position value it's current left value, no luck.
3. the queue counter should accurate that's below slideshow.

js fiddle found here: http://jsfiddle.net/qwqcq/
js fiddle 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 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 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> 

^{firstly, +1 great, detailed question.}

---

the problem you're giving animation 6,000ms complete. if pause animation half way, you've done half work; still give animation 6,000ms complete upon resuming, why it's performing slower.

to fix this, need little bit of this:

the speed @ want animation occur @ (measured in pixels/ millisecond rather more conventional km/hour), can calculated via:

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

then animateme function needs updated calculate time animation complete, based on how far animation has travel, , 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 seen here: http://jsfiddle.net/qwqcq/3/