Charger et animer du contenu

Question

J'ai un petit problème concernant un effet d'animation qui charge un certain div dans le corps du site.

Permettez-moi d'être plus précis: j'ai un div avec l'id « contact »: <div id="contact">content</div> Le code jquery charge le contenu dans ce div, quand je presse le lien avec l'id « ajax_contact »: <a href="#" id="ajax_contact">link</a>.

Le code fonctionne parfaitement. Toutefois, je veux que #contact soit HIDDEN lorsque le site est chargé, c'est-à-dire que l'état par défaut doit être non visible. Seulement lorsque l'utilisateur clique sur le lien #ajax_contact, la div doit apparaître.

S'il vous plaît jeter un oeil au code jquery:

$(document).ready(function() { 

    var hash = window.location.hash.substr(1); 
    var href = $('#ajax_contact').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #contact'; 
      $('#contact').load(toLoad) 
     } 
    }); 

    $('#ajax_contact').click(function(){ 

     var toLoad = $(this).attr('href')+' #contact'; 
     $('#contact').hide('fast',loadContent); 
     $('#load').remove(); 
     $('body').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('#contact').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('#contact').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

}); 

Je ne sais pas si je dois changer quelque chose à l'intérieur du HTML, mais je crois que la clé se trouve dans la jquery code. J'ai aussi essayé de donner au #contact un style CSS de visible: none, mais cela rend la jquery impossible à charger le #contact.

J'espère que je me suis bien expliqué; Merci beaucoup d'avance.
Chris

Answer 1

CSS:

#contact { display: none; } 

jQuery:

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

Ce que je suggère est:

<a id="contact" class="load">Load contacts</a> 
<div id="content_contact" class="load"></div> 

avec CSS:

div.load { display: none; } 

et:

$("a.load").click(function() { 
    $("#load_" + this.id).load("...", function() { 
    $(this).show(); 
    }); 
    return false; 
}); 

Edit: votre principal problème est la façon dont vous callbacks passer. Au lieu de:

$("#contact").load(toLoad, '', showNewContent()); 

faire:

$("#contact").load(toLoad, '', showNewContent); 

La première version passe la valeur de retour à load(). La seconde passe la fonction elle-même.

Edit 2: pour basculer vers l'affichage:

$("a.load").click(function() { 
    var dest = $("#load_" + this.id); 
    if (dest.hasClass("loading")) { 
    // do nothing if already loading 
    } else if (dest.is(":visible")) { 
    dest.hide(); 
    } else if (dest.is(":empty")) { 
    dest.addClass("loading").load("...", function() { 
     $(this).removeClass("loading").show(); 
    }); 
    } else { 
    dest.show(); 
    } 
    return false; 
}); 

Une classe de "chargement" est ajouté pour arrêter plusieurs load() appels. La classe est supprimée une fois chargée. Le contenu n'est chargé qu'une seule fois en vérifiant si la div de destination est vide. Vous pouvez changer cela si vous le souhaitez afin qu'il soit chargé chaque fois qu'il est caché. Cela dépend de ce que vous chargez.