Ankündigung

Einklappen
Keine Ankündigung bisher.

"Loading..." Animation

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • "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...

  • #2
    Statt textContent innerHTML verwenden und dann sollte es doch gehen...
    "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

    Kommentar


    • #3
      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':
      Uncaught ReferenceError: Invalid left-hand side in assignment
      Und wenn ich so etwas probiere:
      $('#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;
      }); 

      Kommentar

      Lädt...
      X