2010-06-26 11 views
10

próbowałem jQuery

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

do tego elementu, który ma z-index 1000, ale wciąż jest nad innymi elementami?

(Jeśli używam Firebug go zmienić na -1000 to będzie poniżej innych elementów)

+0

Jaki efekt próbujesz osiągnąć? Animowanie indeksu Z nie przyniesie wiele dobrego. Nawet jeśli z-index był stopniowo obniżany, zauważyłbyś tylko (nie-animowaną) zmianę w punkcie, w którym przełączono wysokie/niskie wartości i stała się ona mniejsza niż pozostałe elementy. – munch

+3

@munch: Widzę, jak to działa. Rozważ stos kart i kartę, która spływa po stosie. Pamiętaj, że zadziała tylko wtedy, gdy jest kilka kart z indeksami z zakresu od miejsca, w którym zaczyna się ten element i od -1000 ... –

+0

Czy są jakieś dokumenty, które mówią, że funkcja animate() nie będzie działać dla z- indeks? –

Odpowiedz

37

jQuery próbuje dodać jednostkę do wartości na każdym etapie animacji. Tak więc zamiast 99 będzie to 99px, co oczywiście nie jest prawidłową wartością zIndex.

Nie wydaje się możliwe ustawienie jednostki używanej przez jQuery do po prostu pustego ciągu znaków - spowoduje to uwzględnienie jednostki uwzględnionej w wartości (np. 20% - procent jednostki) lub skorzystanie z px.

szczęście można siekać animate() do tej pracy:

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

Aby uzyskać więcej informacji o ~~ zobaczyć this.

+2

muszę dać +1 dla informacji o ~~! –

+0

Czy jest do tego minimalna wersja jQuery? Po prostu próbowałem to zrobić z jQuery 1.2.6 i niestety nic nie robi. Próbowałem dodać pełną funkcję, a nawet to nie było wywoływane przez animację. –

+0

Mam takie samo pytanie jak Mateusz. Używam jquery 1.5.1 i widzę przełączanie obrazów, ale bez animacji.Jeśli ktoś kiedykolwiek zobaczy ten komentarz i zna odpowiedź ... podziel się nim ze światem – peterK

-2

Nie można animować zindex. Możesz ustawić, używając .css.

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

+0

Myślałem, że animate() ma być w stanie animować wszystko (rozsądne) w CSS? (coś, co ma wartość skalarną) –

+0

hmm, cóż, jeszcze nie widziałem przeglądarki 3D! – redsquare

+2

Animowanie indeksów z jest bardzo przydatne w takich sytuacjach: http://jsfiddle.net/ejvsY/122/ –