jQuery: FadeOut poi SlideUp

Question

Se un elemento viene eliminato, desidero dissolverlo e far scorrere verso l'alto gli altri elementi per riempire lo spazio vuoto. Ora, quando uso fadeOut(), l'elemento non ha un'altezza alla fine, il che si traduce in altri elementi che salta in alto (invece di scorrere bene).

Come posso slideUp() e elemento subito dopo 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); 
    } 
}; 

L'ho provato su JQuery 1.3.2 e funziona.

Modifica: questo è il codice da cui l'ho chiamato. # Slide-allora-fade è l'ID di un elemento pulsante, l'articolo-text è una classe su un tag div:

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

Edit 2: modificati per utilizzare il built-in slideUp.

Edit 3: riscritto come un interruttore, e utilizzando fadeTo

Answer 2

Non si può catena?

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

EDIT:

Forse this aiuterà invece?

Answer 3

La funzione fadeOut prende un secondo argomento opzionale di una funzione di callback, così si dovrebbe essere in grado di fare qualcosa del genere:

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

EDIT: Ho dimenticato di aggiungere la velocità del fadeOut come primo parametro

Answer 4

Sembra che sarebbe meglio usare jQuery fadeTo comando

$(function() { 

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

    }); 

}); 

Working Demo here.

Eseguendo ciascun comando nella funzione di richiamata del comando precedente, il comando non verrà eseguito fino a quando non si completa il precedente; un "salto" si verifica quando l'elemento viene rimosso dal DOM senza attendere il completamento della diapositiva.

Answer 5

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

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

}); 

Answer 6

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

demo Here