JQuery Animate Z-Index?

Question

Dans ma page, j'ai différents éléments de menu qui déclenchent différentes images correspondantes. Le z-index bascule l'image correspondante vers le haut. Voici le code:

$(document).ready(function(){ 

var doorOpen = false; 

$("a[href=#andrew]").click(function() { 

    if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not 
     var duration = 1500; 
    } else { 
     var duration = 0; 
    } 

    $("#rightdoor,#leftdoor").animate(
     {"marginLeft":"0px"}, 
     {duration:duration, 
      complete:function() { 
       $('.pic2 .pic3 .pic4 .pic5').css('zIndex', 1); //puts wrong pics in back 
       $('.pic1').css('zIndex', 2); //brings right pic into view 
       $('#rightdoor').animate({ //opens doors again 
       marginLeft: "150px", 
       }, 1500); 
       $('#leftdoor').animate({ 
       marginLeft: "-150px", 
       }, 1500); 
      } 
     } 
    ); 

    doorOpen = true; 


}); 

$("a[href=#bugz]").click(function() { 

    if (doorOpen) { // set animation duration for door close, based on actually needed to animate the door closed or not 
     var duration = 1500; 
    } else { 
     var duration = 0; 
    } 

    $("#rightdoor,#leftdoor").animate(
     {"marginLeft":"0px"}, 
     {duration:duration, 
      complete:function() { 
       $('.pic1 .pic3 .pic4 .pic5').css('zIndex', 1); //puts wrong pics in back 
       $('.pic2').css('zIndex', 2); //brings right pic into view 
       $('#rightdoor').animate({ //opens doors again 
       marginLeft: "150px", 
       }, 1500); 
       $('#leftdoor').animate({ 
       marginLeft: "-150px", 
       }, 1500); 
      } 
     } 
    ); 

    doorOpen = true;  
}); 
}); 

Le problème est que les œuvres z-index mais seulement une fois par élément de menu, il semble. Si vous cliquez initialement sur #andrew, cela amène pic1 en haut et si vous cliquez sur #bugz cela amène pic2 en haut. Toutefois, si vous cliquez à nouveau sur #andrew, le code est animé avant et après le changement .css(z-index) mais ne modifie pas le z-index pour ramener pic1 en haut.

Je suis nouveau Javascript/JQuery donc s'il vous plaît pardonnez-moi si je me manque quelque chose évidente

Answer 1

Votre sélection est erroné: $('.pic2 .pic3 .pic4 .pic5') cherche des descendants de .pic2.

Vous pouvez utiliser des virgules pour séparer les classes au lieu d'espaces, mais il est plus simple d'utiliser la méthode .siblings à la place:

$('.pic1').css('zindex',2).siblings().css('zindex',1);