Jquery Div Multiple

Fermé
LaurentJ - 6 janv. 2011 à 13:41
 LaurentJ - 7 janv. 2011 à 10:26
Bonjour,

Quelqu'un peut-il m'aider à résoudre ce petit problème?
Les deux fonctions ci-dessous fonctionnent bien... la première fois....
Lors d'un click sur "plus", les divs "page", "backgroundPopup" et"pagebox" apparaîssent avec un effet de fade.

$(document).ready(function() {
	       $('a.plus').click(function() {
			    $("#pages").fadeIn("slow");
			    $("#backgroundPopup").css({"opacity": "0.7"});
			    $("#backgroundPopup").fadeIn("slow");
                            $('#pagebox').show(); 
                            var id = $(this).attr('id'); 
                            $('#pagebox' + id).toggle(1000); 
       
                return false; 
     }); 
});


Le click sur le bouton "close" ferme les divs.
$(document).ready(function() {
	        $('#close').click(function() {
			    $("#pages").fadeOut("slow");
			    $("#backgroundPopup").fadeOut("slow");
                            $('#pagebox').fadeOut("slow"); 
                      
                return false; 
     }); 
});


Cela fonctionne bien la première fois mais lors d'un deuxième clic sur le même "plus", le div "pagebox" n'apparaît plus, le reste bien.
Ca doit sûrement être un petit détail qui m'échappe.

Merci pour votre aide

PS: J'utilise ces fonctions car j'ai plusieurs divs cachés et doivent être activés séparément.
J'ai déjà essayé .hide à la place de .fadeOut, sans succès.

A voir également:

2 réponses

Toujours personne??

sinon, autre possibilité, quelqu'un à une idée pour ajouter un fade in/out à ce script, qui lui fonctionne très bien mais un peu dur visuellement.
  function toggle(menuID){
	           var elt = document.getElementById(menuID);
	           var bg= document.getElementById("backgroundPopup");
	           var page= document.getElementById("pages");
	           var eltStyle = elt.currentStyle || window.getComputedStyle(elt, null);
               
	             if (eltStyle.display == "none")
	              {
		          elt.style.display = "block";
				  page.style.display = "block";
				  bg.style.display= "block";
				  bg.style.opacity= 0.7;
	              }
	             else
	              {
		         elt.style.display = "none";
				  }
			  }
0
Pour ceux que ça intéresse, j'ai trouvé le moyen de résoudre le problème.

Remplacer Toggle par fadeIn.

résultat presque identique à une lightbox pour contenu html, fait maison..

scripts:
Pour ouvrir les divs
<script type="text/javascript">
$(document).ready(function() {
			  $("a.plus").click(function() {
			   if ($("#pages").is(":hidden")){
			    $("#pages").show().fadeIn("slow");
			    $("#backgroundPopup").css({"opacity": "0.7"}).fadeIn("slow");
                            $("#pagebox").show().fadeIn("slow"); 
                           var id = $(this).attr("id"); 
                            $("#pagebox" + id).fadeIn("slow");
				}
			   else{
                            $("#pages").fadeOut("slow");
			    $("#backgroundPopup").fadeOut("slow");
               } 
        }); 
}); 
</script> 

et pour les fermer
<script type="text/javascript">
$(document).ready(function() {
			  $("#close").click(function() {
			    $("#pages").fadeOut("slow");
			    $("#backgroundPopup").css({"opacity": "0"}).fadeOut("slow");
                            $("#pagebox").hide(); 
                                
     }); 
}); 
</script>


ciaoo
0