jQuery $('#divOne').animate({zIndex: -1000}, 2000) ne fonctionne pas?

J'ai essayé de jQuery

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

à cet élément qui a un z-index de 1 000, mais il est toujours au-dessus des autres éléments?

(Si j'utilise firebug pour changer de -1000 alors il sera en dessous des autres éléments)

Quel effet souhaitez-vous aller? Animer le z-index ne sera pas très bonne. Même si le z-index a été progressivement abaissé, vous n'auriez qu'un avis (non animé) changement à l'endroit où le haut/bas des valeurs de commutation et il est devenu moins cher que les autres éléments.
Je peux voir comment cela pourrait fonctionner. Envisager une pile de cartes, et d'une carte en ondulant vers le bas à travers la pile. Rappelez-vous, ça ne marchera que si il y a un tas de cartes avec des z-index dans la gamme entre la où commence et -1000...
Est-il des docs qui dit animate() ne fonctionnera pas pour les z-index?
malsup unis ici jquery.malsup.com/cycle/adv.html n'essayez pas d'animer le z-index dans ie par exemple
J'ai aussi besoin de ce que j'ai une autre animation en cours qui utilise le z-index dans le cadre de la base de calcul de la position sur la page, c'est à dire. z-index supérieur == rapproche == plus grande. Si vous venez de sauter le z-index, puis ce calcul saute aussi et semble horrible.

OriginalL'auteur | 2010-06-26

  1. 37

    jQuery tente d'ajouter une unité à la valeur à chaque étape de l'animation. Ainsi, au lieu de 99 ça va être 99px qui, bien sûr, n'est pas valide zIndex valeur.

    Il ne semble pas possible de régler l'appareil utilisé par jQuery simplement une chaîne vide -- elle va prendre de l'unité que vous inclure dans la valeur (par exemple, 20% pour cent de l'unité) ou elle va utiliser px.

    Heureusement, vous pouvez pirater animate() pour faire ce travail:

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

    Pour plus d'informations sur ~~ voir cette.

    dois donner à ceci un +1 juste pour l'information sur le ~~!
    Il y a un minimum la version jQuery pour cela? J'ai juste essayé de le faire avec jQuery 1.2.6 et, malheureusement, il n'est pas de faire quoi que ce soit. J'ai essayé d'ajouter une fonction complète, et même qui n'a pas été appelé par l'animation.
    J'ai la même question que Matthew. J'utilise jquery 1.5.1, et je peux voir l'image de commutation, mais sans l'animation. Si jamais quelqu'un voir ce commentaire et de savoir la réponse ...merci de le partager avec le monde
    J'ai essayé cette solution (copié exactement comme l'est) et il fonctionne très bien: j'ai une belle animation et le zIndex changements ne sont pas directement sur le clic, mais après le délai défini: parfait animation. Mais si je dis par exemple z: 1, puis à l'intérieur de l'étape div.css('zIndex', 100); (ou "100") pour aller de 1 à 100: le zIndex ne change pas comme prévu avec la transition en douceur. Des idées comment? Ou comment modifier cet exemple pour le faire fonctionner avec le manuel des valeurs au lieu de travailler avec ~~ ? Merci
    Si vous devez modifier manuellement le zIndex -avec une animation fluide, bien sûr - sans l'aide de l' ~~ option (dont je n'étais pas en mesure de contrôler et de personnaliser à mes besoins), vous pouvez la trouvez utile: setTimeout(function () { $("#produit-1").css('zIndex', '2'); $("#produit-2").css('zIndex', '1'); }, 500);

    OriginalL'auteur James

  2. -2

    Vous ne pouvez pas animer le zindex. Vous pouvez définir à l'aide de .css.

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

    J'ai pensé animate() est censé être capable d'animer quoi que ce soit (raisonnable) dans les CSS? (quelque chose qui a une valeur scalaire)
    hmm, eh bien, je suis encore à voir un navigateur 3d!
    l'animation de z indices est assez utile pour des choses comme ceci: jsfiddle.net/ejvsY/122
    Kruithof que js ne fait même pas mention de z-index!
    ne l'a pas dit, dit qu'il serait assez utile pour des choses comme ça 😉

    OriginalL'auteur redsquare