1 Replies - 667 Views - Last Post: 18 November 2011 - 11:21 PM

#1 drayarms   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 199
  • Joined: 18-May 11

Is it possible to check if a jQuery event has taken place?

Posted 22 October 2011 - 03:22 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Is it possible to check if a jQuery event has taken place?

#2 cupidvogel   User is offline

  • D.I.C Addict

Reputation: 31
  • View blog
  • Posts: 593
  • Joined: 25-November 10

Re: Is it possible to check if a jQuery event has taken place?

Posted 18 November 2011 - 11:21 PM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1