jQuery: FadeOut puis slideUp

Question

Si un élément est supprimé alors je voudrais effacer sortir et faire glisser les autres éléments pour remplir l'espace vide. Maintenant, quand j'utilise fadeOut() l'élément n'a pas une hauteur à la fin qui se traduit par les autres éléments à sauter (au lieu de glisser vers le haut bien).

Comment puis-je slideUp() et l'élément juste après fadeOut()?

Answer 1

jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
  if (this.is(":hidden")) {
    return this.slideDown(speed, easing).fadeTo(speed, 1, easing, callback);
  } else {
    return this.fadeTo(speed, 0, easing).slideUp(speed, easing, callback);
  }
};

Je l'ai testé sur JQuery 1.3.2, et il fonctionne.

Edit: Voici le code je l'ai appelé à partir. # Slide-puis fondu enchaîné est l'ID d'un élément de bouton, l'article texte est une classe sur une balise div:

$(document).ready(function() {
  $('#slide-then-fade').click(function() {
    $('.article-text').fadeThenSlideToggle();
  });
});

Edit 2:. Modifié pour utiliser le slideUp intégré

Edit 3: réécrite sous la forme d'une bascule, et en utilisant fadeTo

Answer 2

Sons comme il serait préférable d'utiliser la commande jQuery fadeTo

 $(function() {

     $("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.00, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });

     });

});

de travail de démonstration .

En effectuant chaque commande dans la fonction de rappel de la commande précédente, la commande ne fonctionne pas jusqu'à ce que le précédent se termine; un « saut » se produit lorsque l'élément est retiré du DOM sans attendre la slideUp pour terminer.

Answer 3

Tu ne peux pas enchaîner?

$('myelement').fadeOut().slideUp();

EDIT :

Peut-être cette contribuera à la place?

Answer 4

$("#id").fadeIn(500, function () {

    $("#id2").slideUp(500).delay(800).fadeOut(400);

});

Answer 5

Essayez $('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();

démo

Answer 6

La fonction fadeOut prend un second argument optionnel d'une fonction de rappel, de sorte que vous devriez être en mesure de faire quelque chose comme ceci:

$('elementAbove').fadeOut(500, function() {
    $('elementBelow').slideUp();
});

EDIT: oublié d'ajouter la vitesse du fadeOut comme premier paramètre