Jquery animer des changements dans la div de la hauteur sur ajax charge
Je suis en train de faire un simple ajax charge de tirer dans les résultats de recherche et de les afficher dans un div:
$('#myDiv').load('update.php?id=123', function() {
//callback here
});
C'est tous fonctionne bien et la div mises à jour comme prévu. 'myDiv' soit se réduit ou augmente en fonction du nombre de résultats retournés.
Comment puis-je animer la croissance/psy?
Je sais que je peux soit slideUp/slideDown ou afficher/masquer par exemple
$('#myDiv').slideUp('fast').load('update.php?id=123', function() {
$('#myDiv').slideDown('fast');
});
Cependant, je ne veux pas diminuer ou de cacher ce que je veux de la hauteur pour aller de sa valeur avant de l'ajax charge à la valeur après l'ajax charge.
Est-ce possible?
- Jetez un oeil à jQuery élastique plugin, je pense que la manière dont les calculs sont effectués en arrière-plan, il y aurait un point de référence utile
Vous devez vous connecter pour publier un commentaire.
Vous devez d'abord arrêter le redimensionnement automatique.
puis une fois la charge terminée, nous envelopper le contenu dans un div et de l'utiliser pour recalculer la hauteur.
Démo
Donner #myDiv un style="position:relative;". Ensuite, dans le rappel de .load(), créer un caché , lui donner la largeur de #myDiv et de charger les résultats en elle. Lire la hauteur de l'caché div, et de faire une animation à la hauteur de #myDiv. supprimer le caché div.
Vous avez besoin
jQuery.animer
. Avec elle, vous pouvez animer des biens pour une valeur quelconque. Dans votre cas, vous animez leheight
de sa valeur précédente à la nouvelle valeur.Noter, cependant, que vous devez enregistrer l'ancienne valeur avant de remplacer le contenu, car il est à la hauteur (si cela n'est pas absolue) sera mise à jour lorsque le contenu est mis à jour. Peut-être il pourrait être bénéfique pour redimensionner un emballage contenant.
Comme suit:
Si vous définissez la valeur de
overflow
àhidden
pour la.wrapper
, vous pouvez la redimensionner à la hauteur de l'intérieur de ladiv
pour obtenir l'effet que vous êtes après.