Animation erstellen mit durchlaufen eines Arrays

    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

    Ungetestet:

    Hey Bandit!

    Danke für die schnelle Antwort.
    Habs ausprobiert, hat sich ein paar mal übel aufgehängt der arme Safari…:roll:
    Hängt wohl da in einer Schleife fest.

    Hab den Code ja 1:1 reinkopiert, mich ein bisschen gewundert, weil die Funktion ja dann unten offen ist…
    oder bin ich einfach zu doof. Vermutlich.

    Danke aber anyway.
    Werde noch weiter probieren!

    Garavani

    PS:
    Hier der ganze code der Seite.
    Bitte nicht auf den anderen Murks achten :oops:


    <!DOCTYPE html>
    <html>
    <head>
    <head><title>SUPREMA LETTRES</title>
    <style>
    body {
    background-color: #ffffff;
    }
    .container {
    width: 100%;
    max-width:1900px;
    margin:0 auto;
    }
    h1 {
    text-align: center;
    color:#3c3c3c;
    font: 50px/1.05 'SupranimatedRegular';
    display: block;
    padding-left: 5px;
    }
    @font-face {
    font-family: 'SupranimatedRegular';
    src: url('fonts/supranimate-webfont.eot');
    src: url('fonts/supranimate-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/supranimate-webfont.woff') format('woff'),
    url('fonts/supranimate-webfont.ttf') format('truetype'),
    url('fonts/supranimate-webfont.svg#SupranimatedRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    body { -webkit-font-smoothing: antialiased; }
    </style>
    <script src="edge_includes/jquery-1.7.1.min.js"></script>
    <script src="edge_includes/jquery.fittext.js"></script>
    <script type="text/javascript" language="JavaScript">


    var i = 0;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",":") ;function stepAnimation() { if (i < steps.length) { document.getElementById('step').innerText = steps[i]; i++; }}while (i < steps.length) setTimeout("stepAnimation()", 200);


    </script>


    </head>


    <body>


    <div class="container"><h1 id="step">A</h1></div>


    <div id ="Supremextra" style="position: fixed; left: 5%; bottom: 15%; height: 33px; width: 120px;"><img src="images/Suprema.png"></div>
    <div id ="arrowLast" style="position: fixed; margin-left: 0px; right: 50%; bottom: 5%; height: 47px; width: 50px;><img src="images/Arrow_left_pos.png"> </div>
    <div id ="arrowNext" style="position: fixed; margin-left: 24px; left: 50%; bottom: 5%; height: 47px; width: 50px; cursor:pointer;" onclick="stepAnimation()"><img src="images/Arrow_right_pos.png"></div>
    <script type="text/javascript">
    $("#step").fitText(0.33);
    </script>

    </body>
    </html>

    Ähm, ja, die Schleife darf nicht sein, versuche es mal so: