Come rimuovere la proprietà z-index utilizzando jQuery

Question

Sto creando un sito Web in cui ci sono 4 div di dimensioni uguali. Se I fa clic su qualsiasi div it ingrandisce per coprire i rimanenti 3 div. Per ottenere questo ho bisogno di utilizzare z-index proprietà. Non specifico z-index nello stile e lo aggiungo solo usando jQuery quando clicco su qualsiasi div. Ecco il mio codice per un div:

<div id="one" style="background: #58D3F7; height: 200px; width: 200px; position: absolute; 
    margin-left: 410px; margin-top: 202px; float: left; cursor: pointer; text-align: center;"></div> 

E qui è il codice jQuery per massimizzare:

$(function() { 
    var state = true; 
    $("#one").click(function() { 
     if (state) { 
      $("#one").animate({ 
       height: 300, 
       top: -100 
      }, 1000); 
      $("#one").css({ "z-index": "1" }); 
      $("#one").animate({ 
       width: 300, 
       left: -100 
      }, 1000); 
      $("#itxt1").animate({ 
       color: "#58D3F7" 
      }, 1000); 
      $("#one").animate({ 
       height: 650, 
       width: 650 
      }, 1000); 
     } else { 
      $("#one").animate({ 
       backgroundColor: "#58D3F7", 
       height: 200, 
       width: 200, 
       left: 8, 
       top: 8, 
       opacity: 1 
      }, 1000); 
      $("#one").removeAttr("z-index"); 
     } 
     state = !state; 
    }); 
}); 

Il codice precedente funziona bene, tranne quando si fa clic per la seconda volta div di ridurre al minimo, la z la proprietà dell'indice rimane. Voglio che vada. Come posso raggiungere questo obiettivo?

Answer 1

z-index non è un attributo.

Come indicato nella documentazione, si può fare

$("#one").css("z-index", ''); 

Estratto the documentation:

Impostare il valore di una proprietà di stile su una stringa vuota - per esempio $ ('# mydiv'). Css ('color', '') - rimuove la proprietà da un elemento se è già stata applicata direttamente, sia nello stile HTML , tramite il metodo .css() di jQuery, o tramite diretta manipolazione DOM della proprietà style. Tuttavia, non rimuove uno stile che è stato applicato con una regola CSS in un foglio di stile o elemento .

Answer 2

È possibile rimuovere utilizzando .css() in jQuery

$('#id').css('z-index',''); 

provare come questo

Answer 3

Invece di:

$("#one").removeAttr("z-index"); 

rimuoverlo dal CSS:

$("#one").css("z-index", ""); 

Oppure, perhap s

$("#one").css("z-index", "auto"); 

Answer 4

uso iniziale per ripristinare z-index al suo valore di default

$('#id').css('z-index','initial'); 

CSS Sintassi

z-index: auto | numero | iniziale | ereditare;

• auto: consente di impostare l'ordine di stack uguale ai suoi genitori. Impostazione predefinita
• numero: imposta l'ordine di stack dell'elemento.Numeri negativi ammessi
• iniziale: imposta questa proprietà sul valore predefinito. Informazioni sull'iniziale
• inherit: eredita questa proprietà dall'elemento padre.