[FRAGE] Animation in einer Endlossschleife

[tobsenks]

Hallo Leute,

ich habe eine Animation mit JavaScript erstellt.. Diese ist in einer Funktion untergebracht.. Ich möchte nun das die Funktion wiederholt wird sobald sie abgeschlossen ist.. EInfach gesagt ich möchte das die Animation in einer Endlossschleife läuft... Kann mir bitte jemand helfen wie ich das mache?...

Aufruf der Funktion

$(document).ready(function(){
    animateDiv();  
});

Funktion animateDiv

function animateDiv(){
	$('#ball').animate({top: '+=65%'}, 1000);
	$('#ball').animate({top: '-=20%', left: '+=65%'}, 1000);
	$('#ball').animate({top: '-=55%', left: '-=55%'}, 1000);
	$('#ball').animate({top: '+=75%', left: '-=15%'}, 1000);
	$('#ball').animate({top: '-=75%', left: '+=65%'}, 1000);
	$('#ball').animate({top: '+=75%', left: '-=30%'}, 1000);
	$('#ball').animate({top: '-=75%', left: '-=48%'}, 1000);
	$('#ball').animate({top: '+=15%', left: '+=82%'}, 1000);
};

Habe keine Idee mehr wie ich es machen könnte...

Gruß
Tobias

 

[s4ty]

Schau dir mal setTimeout und setInterval an.

 

[tobsenks]

Habe ich schon... Das Problem ist das ich nicht genau sagen kann wie lange die Animation dauert...

 

[Mephiztopheles]

Sowas wie

var interval = true;
function animateDiv(){
    while(interval) {
        $('#ball').animate({top: '+=65%'}, 1000); 
        $('#ball').animate({top: '-=20%', left: '+=65%'}, 1000); 
        $('#ball').animate({top: '-=55%', left: '-=55%'}, 1000); 
        $('#ball').animate({top: '+=75%', left: '-=15%'}, 1000); 
        $('#ball').animate({top: '-=75%', left: '+=65%'}, 1000); 
        $('#ball').animate({top: '+=75%', left: '-=30%'}, 1000); 
        $('#ball').animate({top: '-=75%', left: '-=48%'}, 1000); 
        $('#ball').animate({top: '+=15%', left: '+=82%'}, 1000); 
        animateDiv();
    }
};  

function stopAnimateDiv() {
    interval = false;
}

Aber eigentlich solltest du die Animationen verschachteln:

var interval = true;
function animateDiv(){
    while(interval) {
        $('#ball').animate({top: '+=65%'}, 1000, function( ){
            $('#ball').animate({top: '-=20%', left: '+=65%'}, 1000, function() {
                [...]
                $('#ball').animate({top: '+=15%', left: '+=82%'}, 1000, function() {
                    animateDiv();
                }); 
            });
        }); 
    }
};  

function stopAnimateDiv() {
    interval = false;
}

 

[tobsenks]

Vielen Dank Hat einwand frei funktioniert...