2008-10-02 5 views
2

Si je crée une fonction avec jQuery qui ajoute une div vide, effectue une animation dans l'espace vide créé par div, puis supprime la div, le navigateur ne fait jamais de place pour la div vide (hauteur et la largeur sont définies).Ajout et suppression de contenu dans jQuery

Si je ne supprime pas la div vide dans ma fonction, le navigateur créera l'espace nécessaire et tout fonctionnera correctement. Cependant, j'ai vraiment besoin de l'espace vide créé par la div pour être supprimé lorsque l'animation est terminée.

Existe-t-il un moyen de mettre en file d'attente le div divovall afin que le navigateur affiche le comportement souhaité?

+0

Pouvez-vous fournir le code jQuery vous avez déjà? –

+0

Etes-vous sûr de ne pas supprimer le div avant la fin de l'animation? Comment vous assurez-vous que l'animation est terminée? – SpoonMeiser

Répondre

0

ça ne marche pas si vous utilisez un setTimeout -?)

1

En faisant une recherche Google sur jQuery et setTimeout, j'ai trouvé un exemple qui m'a envoyé une autre piste. Le problème se produit, je pense, parce que la manipulation div est sur un sélecteur séparé de l'animation réelle. Cela provoque la création et la suppression de la div même lorsque l'animation est toujours en cours. En ajoutant une instruction animate simple au div qui retarde le retrait jusqu'à ce que l'animation principale soit terminée, je peux obtenir l'effet désiré.

0

Le problème est que le DOM n'est pas mis à jour jusqu'à ce que votre fonction se termine. Donc, en utilisant setTimeout, le dom va se mettre à jour et 100ms plus tard, le reste de votre fonction peut continuer. Si vous ne voulez pas que le nouveau div soit vu, je mettrais la position à l'absolu et le haut à quelque chose comme -5000. Il aura des dimensions etc, juste ne sera pas visible. Vous pouvez également définir la visibilité (en css) à caché juste au cas où vous auriez peur qu'il apparaisse à l'écran.

3

Certains effets jQuery ont callbacks, qui sont exécutés après l'effet, par exemple:

$('#someDiv').slideDown(100, function() { 
    $(this).remove(); 
}); 
Questions connexes