Question

I have a little animation that makes elements bob up and down. Each element bobs at a slightly different speed and amount.
I’m using Jquery Timers (http://plugins.jquery.com/project/timers) everyTime function to infinitely loop the animation.

I’ve successfully got the elements to bob up and down, but I can’t get them to stop using the stopTime() function.

Here is what I have so far:

function randomFromTo(from, to){
   return Math.floor(Math.random() * (to - from + 1) + from);
}

    function bobbing(command){

       if(command=='start'){
          $("#scroller .feature-headline").each(function (i) {
             $(this).everyTime(1, 'bobbing', function (){
                var bobAmount = randomFromTo(5, 10);
                var bobSpeed = randomFromTo(1200, 2000);
                $(this).animate ({marginTop: bobAmount}, bobSpeed, 'linear').animate ({marginTop: 0}, bobSpeed, 'linear');
             });
          });
       } else {
          $("#scroller .feature-headline").each(function (i) {
             $(this).stopTime('bobbing');
          });
       }

    }

Where am I going wrong?

Answer 1

This tutorial makes a distinction between stopping the timer and stopping the animation. It’s example to completely stop the animation is

$( "#ball_holder").stop(true).stopTime();

…so I would try

$(this).stop(true).stopTime('bobbing');