2010-06-26 10 views
10

Ho provato jQuery

$('#divOne').animate({zIndex: -1000}, 2000) 

a tale elemento che ha un indice z 1000, ma è ancora al di sopra degli altri elementi?

(Se uso Firebug per cambiarlo in -1000 allora sarà sotto altri elementi)

+0

Che effetto stai cercando di fare? Animare lo z-index non farà molto bene. Anche se lo z-index fosse progressivamente abbassato, noteresti solo una modifica (non animata) nel punto in cui i valori alti/bassi sono passati e sono diventati meno degli altri elementi. – munch

+3

@munch: posso vedere come funzionerebbe. Considera una pila di carte e una carta che si increspa attraverso la pila. Intendiamoci, funzionerà solo se ci sono un certo numero di carte con indici z nell'intervallo tra dove inizia quell'elemento e -1000 ... –

+0

C'è qualche documento che dice che animate() non funzionerà per z- indice? –

risposta

37

jQuery tenta di aggiungere un gruppo al valore ad ogni passo dell'animazione. Quindi, invece di 99 sarà 99px che, ovviamente, non è un valore valido zIndex.

Non sembra possibile impostare l'unità utilizzata da jQuery su una stringa vuota: prenderà l'unità inclusa nel valore (ad esempio 20% - unità percentuale) o utilizzerà px.

Fortunatamente, è possibile incidere animate() per fare questo lavoro:

var div = $('#divOne'); 

$({ 
    z: ~~div.css('zIndex') 
    // ~~ to get an integer, even from non-numerical values like "auto" 
}).animate({ 
    z: -1000 
}, { 
    step: function() { 
     div.css('zIndex', ~~this.z); 
    }, 
    duration: 2000 
}); 

Per maggiori informazioni sulla ~~ vedere this.

+2

devi dare un +1 solo per le informazioni su ~~! –

+0

Esiste una versione jQuery minima per questo? Ho appena provato a farlo con jQuery 1.2.6 e sfortunatamente non sta facendo nulla. Ho provato ad aggiungere una funzione completa, e anche quella non veniva chiamata dall'animazione. –

+0

Ho la stessa domanda di Matthew. Sto usando jquery 1.5.1, e posso vedere il cambio di immagine ma senza l'animazione.Se qualcuno dovesse mai vedere questo commento e conoscere la risposta ... per favore, condividilo con il mondo – peterK

-2

Non si può animare la zIndex. È possibile impostarlo utilizzando .css.

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

+0

Penso che animate() sia in grado di animare qualsiasi cosa (ragionevole) all'interno dei CSS? (qualcosa che ha un valore scalare) –

+0

hmm, beh, devo ancora vedere un browser 3d! – redsquare

+2

L'animazione degli indici z è molto utile per cose come questa: http://jsfiddle.net/ejvsY/122/ –