8
votes

JQuery: Élément - Obtenir la (s) valeur (s) CSS finale (s) pendant l'animation

Considérez le scénario suivant:

element.css({display:'none'});
element.slideDown(1000);

btn.click(function() {
    var finalHeight = element..?
    var str = 'height of the element will be ' + finalHeight;
    str += ' when the animation is complete';
    alert(str);
}


4 commentaires

Pourquoi l'appelez-vous la dernière hauteur si vous voulez juste la hauteur pendant l'animation? La hauteur finale serait la hauteur lorsque l'animation est complète.


Exactement. Et c'est ce que j'essaie d'obtenir.


La hauteur finale serait la hauteur lorsque l'animation est faite, c'est-à-dire à 1000ms. Il semble que vous souhaitiez la hauteur à des intervalles spécifiques. Vous pouvez essayer d'utiliser seinterval pour sonder pour la hauteur mais qui semble juste en désordre.


Aucun intervalle, uniquement lorsque l'utilisateur clique sur un bouton. Je voulais juste éviter des suggestions possibles qui reposent sur des calculs de base tels que * 2/2 etc.


3 Réponses :


-1
votes

Utiliser la fonction de hauteur de jQuery.

élément.Height ();


3 commentaires

Qui donne la valeur actuelle. J'essaie d'obtenir le dernier.


Je voulais dire après la fin de l'animation. Vous devrez utiliser une fonction de rappel, non seulement le mettre immédiatement après l'appel à la serviette


Je pourrais obtenir la valeur en utilisant css ('Hauteur') si j'ai attendu jusqu'à la fin. Ma question est de savoir comment puis-je obtenir cette finale valeur avant l'animation terminée. Merci quand même.



1
votes

La voie habituelle consiste à utiliser SDITEDOWN Fonction de rappel du code: XXX

Demo: http://jsfiddle.net/ambigue/p47cj / 1 /


2 commentaires

Cela ne déclenche pas à la fin de l'animation?


@inhan: Oui, c'est quand vous savez à quelle taille ça va être. Essayer de forcer le comportement synchrone sur un système asynchrone est une recette des bugs et de la frustration. Le modèle standard avec JQuery et JavaScript consistent à utiliser des rappels sur tout le lieu.



1
votes

Quand avez-vous besoin de la hauteur finale? Si vous avez besoin de la hauteur une fois que l'animation est terminée, vous pouvez facilement joindre une fonction de rappel en tant que second argument sur .slitown qui lit les propriétés CSS (ou $ (ceci) .Height () < / code>) Une fois que l'animation est terminée.

Si vous voulez prédire la hauteur finale de l'animation alors qu'elle est toujours en cours d'exécution, les choses ne sont pas si simples, car Afaik vous ne pouvez accéder que la hauteur calculée des éléments déjà rendus par le navigateur, vous ne pouvez pas lire la hauteur de la hauteur de éléments dans les futurs rendus. Mais si vous cachez l'élément avant de le glisser, vous pourriez peut-être attacher la hauteur calculée ( .Height () ) à l'élément DOM à l'aide de .data () avant de vous «Re cachez-le puis lisez simplement cette valeur pour obtenir la dernière hauteur.

EDIT:

En réalité, les choses pourraient être assez simples: lisez simplement la hauteur de l'élément à l'aide de CSS ('Hauteur') avant Démarrer l'animation (mais après le cacher) et stocker la valeur en utilisant DATA : Regardez ici pour un exemple: http: // jsfiddle .NET / QNDCV /


5 commentaires

Eh bien, je n'aurai pas accès à cela non plus. Mais je sais que je peux accéder à ces données en quelque sorte par élément.etc [.etc [...]] . Je l'ai fait sortir les toutes les propriétés (147) et j'ai vu qu'il y a des minuteries qui y travaillent pendant l'animation, toutes accessibles à partir de la fonction . Je pense donc que je devrais pouvoir y accéder aussi.


Quel genre d'élément est-ce que vous faites glisser?


Regardez le violon de ma réponse modifiée. J'espère que cela correspond à votre cas.


Pour l'instant, j'ai fini par faire exactement la même chose. Pour chaque élément, je le fais Affichage: Bloc , Joignez-la de sa hauteur à l'aide de .Data ('finalheight', etc.) , la masquant et le permet de supprimer ces données une fois Il termine l'animation. Mais je pense toujours qu'il doit y avoir une autre façon. Merci pour votre contribution :)


Vous n'avez pas à afficher l'élément pour obtenir sa hauteur. Vous devez juste avoir la hauteur avant de démarrer l'animation, l'élément ne doit pas être visible. BTW, c'est essentiellement comment JQuery détermine la hauteur finale en interne pour calculer les étapes d'animation.