jQuery's $ ('# divOne'). Animate ({zIndex: -1000}, 2000) no funciona?

I trataron de jQuery

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

a ese elemento que tiene un índice z de 1000, pero todavía está por encima de los otros elementos?

(Si uso Firebug para cambiarlo a -1000 entonces será por debajo de otros elementos)

Fuente

2010-06-26 太極者無極而生

¿Qué efecto estás tratando de conseguir? Animar el índice z no servirá de mucho. Incluso si el índice z se redujera progresivamente, solo notaría un cambio (no animado) en el punto donde los valores alto/bajo cambiaron y se volvió menos que los otros elementos. – munch

@munch: Puedo ver cómo funcionaría esto. Considera una pila de cartas y una carta que se desliza por la pila. Eso sí, solo funcionará si hay un montón de tarjetas con índices z en el rango entre el comienzo de ese elemento y -1000 ... –

¿Hay algún documento que diga que animate() no funcionará para z- ¿índice? –

jQuery intentos de añadir una unidad para el valor en cada paso de la animación. Entonces, en lugar de 99 será 99px que, por supuesto, no es un valor zIndex válido.

No parece posible establecer la unidad utilizada por jQuery a una cadena simple en blanco - que va a tomar ya sea la unidad que incluya en el valor (por ejemplo 20% - unidad por ciento) o que utilizará px.

Afortunadamente, se puede hackear animate() para hacer este trabajo:

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

Para obtener más información sobre ~~ ver this.

Fuente

2010-06-26 07:32:56 James

tengo que darle un +1 solo por la información sobre ~~! –

¿Hay una versión mínima de jQuery para esto? Intenté hacer esto con jQuery 1.2.6 y desafortunadamente no está haciendo nada. Traté de agregar una función completa, e incluso eso no fue llamado por la animación. –

Tengo la misma pregunta que Matthew. Estoy usando jquery 1.5.1, y puedo ver el cambio de imagen pero sin la animación.Si alguien ve este comentario y conoce la respuesta ... por favor, compártala con el mundo. – peterK

-2

~~No se puede animar la zindex.~~ Puede configurarlo usando .css.

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

Fuente

2010-06-26 07:07:52 redsquare

Pensé que se suponía que animate() podría animar cualquier cosa (razonable) dentro de CSS? (algo que tiene un valor escalar) –

hmm, bueno, todavía no he visto un navegador 3D! – redsquare

animar índices z es bastante útil para cosas como esta: http://jsfiddle.net/ejvsY/122/ –

jQuery's $ ('# divOne'). Animate ({zIndex: -1000}, 2000) no funciona?

Respuesta

Cuestiones relacionadas