2010-06-26 13 views
10

ich versuchte

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

jQuery auf dieses Element, das einen z-Index von 1000 hat, aber es ist immer noch über den anderen Elementen?

(Wenn ich Firebug verwenden, um es -1000 zu ändern, dann wird es unter anderen Elementen sein)

+0

Welchen Effekt versuchen Sie zu erreichen? Das Animieren des Z-Index wird nicht viel Gutes bewirken. Selbst wenn der Z-Index progressiv gesenkt wurde, würden Sie nur eine (nicht animierte) Änderung an dem Punkt bemerken, an dem die hohen/niedrigen Werte umgeschaltet wurden, und er wurde kleiner als die anderen Elemente. – munch

+3

@munch: Ich kann sehen, wie das funktionieren würde. Betrachte einen Stapel Karten und eine Karte, die durch den Stapel rutscht. Wohlgemerkt, es funktioniert nur, wenn es eine Reihe von Karten mit Z-Indizes im Bereich zwischen dem Start des Elements und -1000 ... gibt. –

+0

Gibt es Dokumente, die angeben, dass animate() nicht für z- funktionieren wird? Index? –

Antwort

37

versucht jQuery eine Einheit auf den Wert bei jedem Schritt der Animation hinzuzufügen. Also statt 99 wird es 99px sein, was natürlich kein gültiger zIndex Wert ist.

Es scheint nicht möglich, die von jQuery verwendete Einheit einfach auf eine leere Zeichenfolge zu setzen - entweder die Einheit, die Sie in den Wert aufnehmen (z. B. 20% - Prozenteinheit) oder px.

Zum Glück können Sie animate() hacken diese Arbeit zu machen:

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 
}); 

Für weitere Informationen über ~~this sehen.

+2

muss ein +1 geben nur für die Informationen über ~~! –

+0

Gibt es dafür eine minimale jQuery-Version? Ich habe gerade versucht, dies mit jQuery 1.2.6 zu tun und leider tut es überhaupt nichts. Ich habe versucht, eine komplette Funktion hinzuzufügen, und selbst das wurde von der Animation nicht aufgerufen. –

+0

Ich habe die gleiche Frage wie Matthew. Ich benutze jquery 1.5.1, und ich kann das Bild wechseln sehen, aber ohne die Animation.Wenn jemand diesen Kommentar sieht und die Antwort kennt ... bitte teilen Sie ihn mit der Welt – peterK

-2

Sie können nicht die zindex animieren. Sie können es unter Verwendung .css einstellen.

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

+0

Ich dachte animate() soll alles (vernünftige) in CSS animieren können? (etwas, das einen skalaren Wert hat) –

+0

hmm, naja ich bin noch auf einen 3D Browser! – redsquare

+2

animieren z Indizes ist ziemlich nützlich für solche Dinge: http://jsfiddle.net/ejvsY/122/ –

Verwandte Themen