Mam element, który powinien być animowany cały czas. Animowany element ma takie właściwości CSS:
#world {
height: 100%;
max-height: 100%;
position: relative;
display: flex;
background :red;
}
Mogę tylko przesunąć element do konkretnego sposobu, w ten sposób:
$('#world').animate({right: "2000px", easing: "linear"}, 2000);
Ale to po prostu animowało na rok 2000px mój element ma nieskończoną szerokość.
AKTUALIZACJA:
Wszystkie 7,5 sek. #world staje się większy.
5 odpowiedzi
Możesz mieć funkcję rekurencyjną:
var anim;
anim = function(times) {
$('#world').animate({
right: 2000 * times
}, 2000, 'linear');
return anim(times + 1);
};
anim(1)
Będzie to nadal poruszać #world w prawo, 1 piksel na milisekund.
Z wywołaniem zwrotnym:
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);
};
Powodzenia!
Dlaczego nie używać prawa: 100%?
Zakładając, że poprawnie czytam Twoje pytanie.
Zawsze możesz zrobić coś takiego, gdzie funkcja nazywa się ponownie za każdym razem, gdy kończy się animację.
function moveMe() {
$('#world').animate({width: '+=100px', easing: "linear"}, 2000, moveMe);
}
Dlaczego nie ustawić wartości right do szerokości elementu
var width = $('#world').width();
$('#world').animate({right: width, easing: "linear"}, 2000);
Możesz także zwiększyć wartość right w następujący sposób
Demo http://jsfiddle.net/meqk662p/
var counter = 0;
setInterval(function () {
++counter;
}, 100);
$('#world').animate({right: counter+"px", easing: "linear"}, 2000);
Powyższy przykład byłby nieskończony
Spróbuj zwiększać prawo i zadzwoń w oddzwonieniu tej samej funkcji
var world_right = 2000;
function endlessWorldStep(){
$('#world')
.animate({right: world_right + "px", easing: "linear"}, 2000, endlessWorldStep);
world_right = world_right + 100;
}