Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.08.2012, 17:55
Garavani Garavani ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.05.2012
Beiträge: 6
Garavani befindet sich auf einem aufstrebenden Ast
Standard Animation mit Durchlaufen eines Arrays erstellen

Hallo Leute,

ich versuche gerade eine Animation zu erstellen mit Hilfe eines (web)Fonts.

dazu habe ich eine Schrift erstellt, deren Buchstaben mit den einzelnen Bildern belegt sind.
Das klappt auch alles wunderbar.

lediglich mit dem Durchlaufen meines Arrays habe ich (Anfänger) Probleme.

So mein div in der page:
<div class="container"><h1 id="step">A</h1></div>

So sieht meine Animationsfunktion bisher aus (wird z.B. durch Klick oder on document ready ausgelöst):

function stepAnimation() {
steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M","N","O","P","Q","R","S","T","U","V","W","X ","Y ","Z","a","b","c","d","e","g","i","j","k","l", "m", "n","o","p","q","r","s","t","u","v","w","x","y ","z ","0","1","2","3","4","5","6","7","8","9",":") ;
while(show = steps.shift()) {
$('#step').delay(200).text(show);
}
}

oder auch:

function stepAnimation() {
var steps = new Array("A","C","D","E","F","G","H","I","J","K","L", "M","N","O","P","Q","R","S","T","U","V","W","X ","Y ","Z","a","b","c","d","e","g","i","j","k","l", "m", "n","o","p","q","r","s","t","u","v","w","x","y ","z ","0","1","2","3","4","5","6","7","8","9",":") ;
var show = "";
for(var i = 0; i < steps.length; i++) {
show = steps[i];
}
document.getElementById('step').innerText = show;
}

Bei beiden (und auch anderen Versionen) funktioniert das ganze scheinbar irgendwie, aber wohl zu schnell,
da ich stets nach dem Start nur das Endbild (also ":" aus dem Array) zu sehen bekomme.
Ich muss irgendwie eine Pause zwischen die einzelnen Bilder bekommen, damit die Animation auch sichtbar fürs Auge abläuft.
Das delay in der oberen jquery Variante ging auch nicht.
Ich mag jquery gern, ist mir also auch recht.

Kann mir jemand helfen?
Oder erkläre ich mich schlecht?

Danke Euch sehr

Garavani
Mit Zitat antworten
Sponsored Links