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.

Fiddle

1
user2615031 15 sierpień 2014, 21:11

5 odpowiedzi

Najlepsza odpowiedź

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!

0
Kites 15 sierpień 2014, 18:04

Dlaczego nie używać prawa: 100%?

Zakładając, że poprawnie czytam Twoje pytanie.

0
Paulo 15 sierpień 2014, 17:17

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); 
}
0
Artjom B. 15 sierpień 2014, 17:25

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

0
Kevin Lynch 15 sierpień 2014, 17:41

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;
}
0
Luan Castro 15 sierpień 2014, 17:47