[drayarms]

Hello folks, well I'm trying to create an animation with a pause and resume functionality. The animation basically shuffles between 4 div elements, sliding each one into view, letting it sit on the screen for some seconds, then sliding it out of view, and the sequence is repeated all over with the next div in the queue. So here is my code for all that magic:

html

           <div class ="anim" id ="anim1">
           </div> <!--closes anim1-->


           <div class ="anim" id ="anim2">
           </div> <!--closes anim2-->


          <div class ="anim" id ="anim3">
          </div> <!--closes anim3-->


          <div class ="anim" id ="anim4">
          </div> <!--closes anim4-->

css

         .anim{width:400px;height:240px;display:none;position:relative;top:40px;left:20px}

         #anim1{background:red}

         #anim2{background:green}

         #anim3{background:blue}

         #anim4{background:yellow}

jQ

        $(document).ready(function() {



				(function($) {

    					$.fn.slido = function() {

        					var elements = this;

            					l = elements.length;

            					i = 0;



        					function execute() {

            					var current = $(elements[i]);

            					i = (i + 1) % l;

	

            					current

                					.animate({width:"toggle"},1000)

                					.delay(6000)

                					   .animate({width:"toggle"},1000,execute);

        					}

        					execute();

        					return this;

   				 	};

				})(jQuery);





				$(".anim").slido();





			}); 

A demostration for what I've done so far can be found here www.mygeneric.info/designwizz/index.php
Well now for the pause and resume part, I want to interrupt the animation every time the user hovers over any of the divs, and resume the animation when the mouse is removed. I hope to accomplish this (not sure if this would work) by modifying the execute function above, by inserting a callback pause function which would be executed if the hover event takes place as follows.

         current.animate({width:"toggle"},1000,pause);

         function pause(){ if (hover event takes place on this) {//show this} else         {//Continue the animation
         delay(6000) current.animate({width:"toggle"},1000,execute);}
         }

Now if at all that makes any sense, I need to know how I would phrase the (hover event takes place on this) portion in jQ if such a thing is possible. Thanks in advance.

[cupidvogel]

Don't know why are you toggling the width to slide in and out, you should animate it out of the box, for example if the wrapper box has a width of 600px, and the slideable div has a width of 300 and presently located 200px from the left of the wrapper, you should use something like this:

$("div.slideable").animate({'left': -500 }, 'slow');

Anyways if you do it your way that's fine, the effect you want to achieve has some caveats. Firstly, the time. If the div is supposed to slide from position a to b in say 5 seconds, and if you hover over it just 1 second after the animation has started, and move out of it after 1 second, the ideal case should complete the rest of the animation in 5-1-1 = 3 seconds. This is possible, you can write some convoluted code involving setTimeOut to measure the time the user remains within the div. But if the user remains for more than 4 seconds? Then you have the complete the rest of the animation in negative time! So the only solution is that whatever be the present position of the div, it should animate to the final position in the same amount of time as planned originally. That can be done with something like this:

$("div.slideable").hover(function() { $(this).stop(); }, function() { $(this).animate({'left': targxpos},5000); 
});

where targxpos is the x coordinate of the final location of the div.

There is a caveat here too, that is if you start the animation from some click on the div, this will break down, because when you are clicking it, you are actually hovering over it too, so the hover function will fire right away, even though you meant to fire it from the next instance of hover onwards. So you should start the animation after some external event, like clicking on some other element, or pageload, for example.