Jquery Animate Überlappung beim Laden Bild

Ich arbeite an einem Projekt, in dem die Navigation nicht wirklich Seiten ändert, sondern Daten mithilfe von Diensten basierend auf welcher Navigationslink Ich klicke und Daten mit jquery .html() -Methode zu aktualisieren, möchte ich Verwenden Sie einen Loader, der beim Klicken auf einen Link angezeigt wird, und blendet den Inhalt aus. Wenn der AJAX-Dienst erfolgreich ist, möchte ich den Loader entfernen und den Inhalt anzeigen. Die Animationen überlappen sich jedoch, sodass Animationen fehlschlagen Hier verwende ich keine Ajax, um meine Seite zu aktualisieren, sondern eine einfache Schaltfläche und jquery, um die Daten zu aktualisierenJquery Animate Überlappung beim Laden Bild

 <body> 

     <div id="loader"> 
      <img src="loader.gif" alt=""> 
     </div> 

     <br> 

     <div id="content"> 
      This is the content 
     </div> 

     <input type="button" id="update" value="Update Data"> 




    </body> 

     <script> 

     function showContent(){ 
     $('#loader').fadeOut(200).promise().done(function(){ 
      $('#content').fadeIn(200).promise().done(function(){ 
      }); 
     }); 
    } 


    function hideContent(){ 
     $('#content').fadeOut(200).promise().done(function(){ 
      $('#loader').fadeIn(200).promise().done(function(){ 
      }); 
     }); 
    } 

$("#update").click(function(){ 
    hideContent(); 
    $("#content").html("New Data"); 
    setTimeout(showContent(), 10000); 

}); 



     </script>

auf Update klicken, sollte dies passieren Inhalt verschwinden sollte, sollte loader erscheinen, Aktualisierung von Inhalten, loader verschwinden, Inhalt erscheinen,

aber ich bekomme beide Lader und Inhalt am Ende erschien

Ich habe setTimeout verwendet, um etwas Verzögerung zu geben, aber es funktioniert nicht, ich habe auch einige Flags früher benutzt, aber das hat nicht funktioniert. JsFiddle: JsFiddleLink

Quelle

2016-07-27 UmeRonaldo

Für den Anfang, übergeben Sie eine Funktion Verweis auf 'setTimeout()' wie folgt aus: 'setTimeout (showContent, 10000);', nicht wie diese 'setTimeout (showContent(), 10000); 'Wenn Sie'() 'nach dem Funktionsnamen setzen, bedeutet dies, dass Sie es sofort ausführen und dann das Rückgabeergebnis von der Funktion an' setTimeout() 'übergeben, was nicht das ist, was Sie wollen. Aber eigentlich sollten Sie keine Timer verwenden. Sie sollten den Abschluss des Ladeereignisses verwenden, um die Änderung auszulösen. – jfriend00

: O ich hätte das schon mal sehen sollen, ja es funktioniert jetzt aber nicht was ich benutzen soll, danke dir – UmeRonaldo

Warum verwenden Sie setTimeout()? Sie können return, Kette, welche die Versprechen

function showContent(){ 
    return $('#loader').fadeOut(200).promise().done(function(){ 
     return $('#content').html(data).fadeIn(200).promise() 
    }); 
} 


function hideContent(){ 
    return $('#content').fadeOut(200) 
    .done(function() { 
     this.empty(); 
     return $('#loader').fadeIn(200).promise() 
    }); 
} 

$("#update").click(function() { 
    hideContent().then(showContent) 
})

Quelle

2016-07-27 00:18:12 guest271314

Jquery Animate Überlappung beim Laden Bild

Antwort

Verwandte Themen