web-dev-qa-db-fra.com

JQuery: Fadeout puis SlideUp

Si un article est supprimé, je voudrais le décolorer et glisser les autres éléments pour remplir l'espace vide. Maintenant, lorsque j'utilise fadeOut() L'élément n'a pas de hauteur à la fin, ce qui entraîne les autres éléments sautant (au lieu de faire glisser bien).

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

jqueryfadeoutslideup
28
bart
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 cela fonctionne.

Edit: C'est le code que je l'ai appelé. # Slide-ALSU-FADE est l'identifiant d'un élément de bouton, le texte de l'article est une classe sur une balise div:

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

Edit 2: modifié pour utiliser la diapositive intégrée.

Modifier 3: Réécrit comme une bascule et utilise Fadeto

41
Powerlord

On dirait qu'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
             });
         });

     });

});

Démo de travail ici .

En effectuant chaque commande dans la fonction de rappel de la commande précédente, la commande ne fonctionnera pas tant que le précédent est terminé; Un "saut" se produit lorsque l'élément est retiré de la DOM sans attendre que la diapositive se termine.

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

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

});
1
albert

Tu ne peux pas la chaîner?

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

[~ # ~] Edit [~ # ~ ~]:

Peut-être Ceci aidera à la place?

1
Kezzer

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

démo ici

1
Nithee