I have an element which should be animated all the time. The animated element has such CSS properties:
JavaScript
x
8
1
#world {
2
height: 100%;
3
max-height: 100%;
4
position: relative;
5
display: flex;
6
background :red;
7
}
8
I can only move the element to a particular way, like this:
JavaScript
1
2
1
$('#world').animate({right: "2000px", easing: "linear"}, 2000);
2
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:
JavaScript
1
11
11
1
var anim;
2
3
anim = function(times) {
4
$('#world').animate({
5
right: 2000 * times
6
}, 2000, 'linear');
7
return anim(times + 1);
8
};
9
10
anim(1)
11
This will continue to move #world
to the right, 1 pixel per millisecond.
With a step callback:
JavaScript
1
17
17
1
var anim, my_step_callback;
2
3
my_step_callback = function() {
4
return $('body').append("<p>Hello</p>");
5
};
6
7
anim = function(times) {
8
$('#world').animate({
9
right: 2000 * times
10
}, {
11
duration: 2000,
12
easing: 'linear',
13
step: my_step_callback
14
});
15
return anim(times + 1);
16
};
17
Good luck!