jquery cacher div

Question

J'espère que quelqu'un peut m'aider. J'ai trouvé ce script jquery pour charger le contenu dans un rythme utilisant ajax

$(document).ready(function(){ 
    //References 
    var sections = $("#menu li"); 
    var loading = $("#loading"); 
    var content = $("#content"); 

    //Manage click events 
    sections.click(function(){ 
     //show the loading bar 
     showLoading(); 
     //load selected section 
     switch(this.id){ 
      case "home": 
       content.slideUp(); 
       content.load("/includes/content.asp", hideLoading); 
       content.slideDown(); 
       break; 
      //case "news": 
      // content.slideUp(); 
      // content.load("sections.html #section_news", hideLoading); 
      // content.slideDown(); 
      // break; 
      case "interviews": 
      content.slideUp(); 
      content.load("/includes/test1.asp", hideLoading); 
      content.slideDown(); 
      break; 
      case "external": 
       content.slideUp(); 
       content.load("/includes/test.asp", hideLoading); 
       content.slideDown(); 
       break; 
      default: 
       //hide loading bar if there is no selected section 
       hideLoading(); 
       break; 
     } 
    }); 

    //show loading bar 
    function showLoading(){ 
     loading 
      .css({visibility:"visible"}) 
      .css({opacity:"1"}) 
      .css({display:"block"}) 
     ; 
    } 
    //hide loading bar 
    function hideLoading(){ 
     loading.fadeTo(1000, 0); 
    }; 
}); 

Et cette ligne de code sont sur la page principale

<div id="loading"> 
    <div align="center"><img src="/css/images/loading.gif" alt="Loading" /></div> 
</div> 

J'ai besoin de cacher l'image de chargement lorsque mes chargement de la page (masquer le DIV ID = "loading") il ne se cache pas lorsque la page se charge, et quand je clique sur un lien pour charger le contenu dans ma page, le div est là pour déplacer mon contenu ...

comment je peux cacher la div quand le chargement div est terminé?

Merci

Answer 1

$(document).ready(function(){ 
    //References 
    var sections = $("#menu li"); 
    var loading = $("#loading").hide(); // Hide the loading image on page load 
    var content = $("#content"); 

Et au lieu d'utiliser .fadeTo() utiliser .fadeOut() de telle sorte que l'image de chargement sera caché au fin de l'animation.

function hideLoading(){ 
    loading.fadeOut(1000); 
}; 

En outre, une amélioration de votre showLoading() pourrait être:

function showLoading(){ 
    loading.show(); 
     // or if you want it animated 
     // loading.fadeIn(200); 
} 

Answer 2

Vous avez juste besoin d'appeler:

$("#loading").hide(); 

Appelez ce sur $(document).ready

Answer 3

Vous pouvez vouloir essayer ce qui suit:

$(document).ready(function(){ 
    $('#loading').css('display','none'); /*If you want the div to appear as if it never existed*/ 
    $('#loading').css('visibility','hidden'); /*If you want the div to be 'hidden' but keep the space that it occupies.*/ 
});