hello,
What I'm doing is I have a set of 5 images that march across the page. They scroll to X spot, pause, then scroll the next image. The images are in an endless loop.

Here is the demo page:
DEMO

Here is the jQuery:

1. var scrollX = 0;
   var n = 0;
   var triggerID;
   var speed = 4000;  //speed in ms
   
   $(function() {
   
   function scrollHor() {
           
               $('img:eq(4)').last().clone().insertBefore($('img:eq(0)')).hide(0);
               $('img:eq(0)').show(2000);
               $('img').last().remove();
       
   }
   
   $(window).load(function() {
           scrollHor();
           triggerID = setInterval(scrollHor, speed);
   });
       
       $("#scrollArea").hover( function(){
                  clearInterval(triggerID);
           //    $('img:eq(0)').stop(false, true);
              }, function() {
                      clearInterval(triggerID);
                   scrollHor();
                   triggerID = setInterval(scrollHor, speed);
                  });
       
   
    });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

What happens right now is when you mouse over the scroll area it will finish the function THEN pause. What I want it to do is once you mouse over it will just stop it where ever it is in that moment, then when you mouse out it will start from the moment you moused over.

If you could help me out that would be great.
-tim