Skip to content
Advertisement

How to make animation() endless

I have an element which should be animated all the time. The animated element has such CSS properties:

#world {
    height: 100%;
    max-height: 100%;
    position: relative;
    display: flex;
    background :red;
}

I can only move the element to a particular way, like this:

$('#world').animate({right: "2000px", easing: "linear"}, 2000);

But this will just animated for 2000px my element has an endless width.

UPDATE:

ALL 7.5 Sec. #world become bigger.

FIDDLE

Advertisement

Answer

You can have a recursive function:

var anim;

anim = function(times) {
  $('#world').animate({
    right: 2000 * times
  }, 2000, 'linear');
  return anim(times + 1);
};

anim(1)

This will continue to move #world to the right, 1 pixel per millisecond.

With a step callback:

var anim, my_step_callback;

my_step_callback = function() {
  return $('body').append("<p>Hello</p>");
};

anim = function(times) {
  $('#world').animate({
    right: 2000 * times
  }, {
    duration: 2000,
    easing: 'linear',
    step: my_step_callback
  });
  return anim(times + 1);
};

Good luck!

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement