jQuery slideUp (). remove () ne semble pas afficher l'animation slideUp avant la suppression

94

J'ai cette ligne de JavaScript et le comportement que je vois est que le selectedLidisparaît instantanément sans "glisser vers le haut". Ce n'est pas le comportement auquel je m'attendais.

Que dois-je faire pour que les selectedLidiapositives se déplacent avant qu'elles ne soient supprimées?

selectedLi.slideUp("normal").remove();
Eric Schoonover
la source

Réponses:

197

Pourrait être en mesure de résoudre ce problème en mettant l'appel à supprimer dans un argument de rappel à slideUp?

par exemple

selectedLi.slideUp("normal", function() { $(this).remove(); } );
seanb
la source
4
Notez que «lent» et «rapide» sont les seules vitesses. Les autres vitesses doivent être
exprimées
19

Vous devez être plus explicite: plutôt que de dire "ceci" (ce qui, je suis d'accord, devrait fonctionner), vous devriez faire ceci:

$("#yourdiv").slideUp(1000, function() {
    $(this).remove();
});
Blake
la source
2
DÉSOLÉ = j'ai oublié de supprimer mon identifiant, devrait être: $ ('# yourdiv'). SlideUp (1000, function () {$ ('# yourdiv'). Remove ();});
Blake
12
L'utilisation de $ (this) au lieu de $ ("# yourdiv") est plus optimisée car jQuery n'a pas besoin de rechercher un nœud.
MaximeBernard
Utiliser $("#yourdiv")au lieu de $(this)est complètement redondant et ce n'est pas pourquoi ce code résout le problème d'OP. Ce code résout le problème car il utilise le completerappel.
Gavin
8

Le moyen le plus simple est d'appeler la fonction "remove ()" dans slideUp en tant que paramètre comme d'autres l'ont dit, comme dans cet exemple:

$("#yourdiv").slideUp("normal", function() {
    $(this).remove();
});

Il est indispensable de l'appeler dans la fonction anonyme () pour empêcher que remove () ne soit exécuté avant la fin du slideUp. Une autre manière égale est d'utiliser la fonction jQuery "promise ()". Mieux pour ceux qui aiment le code explicite, comme moi;)

$("#yourdiv").slideUp("normal").promise().done(function() {
    $(this).remove();
});
xaviqv
la source
3

En utilisant les promesses, vous pouvez également attendre que plusieurs animations soient terminées, par exemple:

selectedLi.slideUp({duration: 5000, queue: false})
.fadeOut({duration: 3000, queue: false})
.promise().done(function() {
    selectedLi.remove()
})
célèbregarkin
la source
-2
selectedLi.slideUp(200, this.remove);

la source
1
J'ai testé - il ne supprime pas l'élément après avoir glissé vers le haut.
Konstantin Spirin
Masque efficacement l'élément, mais ne le supprime pas réellement du DOM.
andreszs