"Loading..." Animation

chunky · 24.05.2010, 22:49

Hi!

Ich möchte gerne eine kleine Animation mit Javascript realisieren.
Dazu möchte ich die Punkte hinter dem "Loading" hochzählen lassen.
Also so:

Loading.
Loading..
Loading...

An anderer Stelle habe ich auch so etwas gefunden. Jedoch wird dort window.onload und window.setInterval verwendet:

PHP-Code:

   window.onload=function(){ 

         var dotspan = document.getElementById('dots'); 

         window.setInterval(function(){ 

            if(dotspan.textContent == '...'){ 

               dotspan.textContent = '.'; 

            } 

            else{ 

               dotspan.textContent += '.'; 

            } 

         }, 1000); 

      }

Ich möchte jedoch die Animation erst bei Aufruf einer Funktion starten.
Kann ich dafür setTimeout() verwenden? Ich bin mir nicht sicher, wie ich das machen soll...

Chriz · 24.05.2010, 22:54

Statt textContent innerHTML verwenden und dann sollte es doch gehen...

chunky · 25.05.2010, 08:37

PHP-Code:

  $("#formular").submit(function(){

    $('#submitbutton').attr("disabled", "disabled");

    $('#loading_anim').show();

    //animated dots
    window.setInterval(function(){
        if($('#dots').html() == '...'){
            $('#dots').html('.');
        }
        else{
            $('#dots').html() += '.';         //X
        }
    }, 1000);

//debug
        return false;
    });

Ich bekomme leider diesen Fehler an der Stelle 'X':

Zitat:

Uncaught ReferenceError: Invalid left-hand side in assignment

Und wenn ich so etwas probiere:

Zitat:

$('#dots').html( $('#dots').html() + '.' );

Dann wird der Button zwar ausgegraut, aber die Animation zeigt sich nicht (ohne Fehlermeldung).

Das hier funktioniert auch nicht:

PHP-Code:

  $("#formular").submit(function(){
    $('#submitbutton').attr("disabled", "disabled");
    $('#loading_anim').show();

    var dots = '';
    window.setInterval(function(){
        if($('#dots').html() == '...'){
            $('#dots').html('.');
        }
        else{
            dots += '.';
            $('#dots').html(dots);
        }
    }, 1000);

    //debug
    return false;
});

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mit PHP eine Animation erstellen...	Akio	PHP Tipps 2009	2	07.09.2009 21:05
Scriptaculous, Div Animation, IE Problem	moveax1	JavaScript, Ajax und mehr	10	11.08.2009 04:22

24.05.2010, 22:49
chunky Erfahrener Benutzer Registriert seit: 19.01.2010 Beiträge: 324 PHP-Kenntnisse: Anfänger	"Loading..." Animation Hi! Ich möchte gerne eine kleine Animation mit Javascript realisieren. Dazu möchte ich die Punkte hinter dem "Loading" hochzählen lassen. Also so: Loading. Loading.. Loading... An anderer Stelle habe ich auch so etwas gefunden. Jedoch wird dort window.onload und window.setInterval verwendet: PHP-Code: `window.onload=function(){ var dotspan = document.getElementById('dots'); window.setInterval(function(){ if(dotspan.textContent == '...'){ dotspan.textContent = '.'; } else{ dotspan.textContent += '.'; } }, 1000); }` Ich möchte jedoch die Animation erst bei Aufruf einer Funktion starten. Kann ich dafür setTimeout() verwenden? Ich bin mir nicht sicher, wie ich das machen soll...


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.05.2010, 22:54
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Statt textContent innerHTML verwenden und dann sollte es doch gehen... __________________ "Nuschel ich?" - "Was?"