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.
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!