jQuery: fadeOut y slideUp

Si se está borrando un elemento, me gustaría desvanecerlo y deslizar los otros elementos para llenar el espacio vacío. Ahora, cuando uso fadeOut() el elemento no tiene una altura al final, lo que hace que los otros elementos salten hacia arriba (en lugar de deslizarse bien).

¿Cómo puedo slideUp() y el elemento justo después de fadeOut()?

Author: Richard Everett, 2009-04-09
Source

6 answers

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);
  }
};

Lo probé en jQuery 1.3.2, y funciona.

Edit: Este es el código desde el que lo llamé. # slide-then-fade es el ID de un elemento button, article-text es una clase en una etiqueta div: 

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

Edit 2: Modificado para usar el slideUp integrado.

Editar 3: Reescrito como un toggle, y usando fadeTo

 39
Author: Powerlord,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-09 16:08:55

Parece que sería mejor usar el comando 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
             });
         });

     });

});

Demostración de trabajo aquí.

Al ejecutar cada comando en la función de devolución de llamada del comando anterior, el comando no se ejecutará hasta que se complete el anterior; se produce un "salto" cuando el elemento se elimina del DOM sin esperar a que se complete el deslizamiento.

 54
Author: Russ Cam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-09 08:46:28

¿No puedes encadenarlo?

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

EDITAR :

Tal vez esto ayudará en su lugar?

 1
Author: Kezzer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-09 14:59:55 
$("#id").fadeIn(500, function () {

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

});
 1
Author: albert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-04 18:07:58

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

Demo Aquí

 1
Author: Nithee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-18 09:17:23

La función fadeOut toma un segundo argumento opcional de una función callback, por lo que debería ser capaz de hacer algo como esto: 

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

EDIT: olvidé añadir la velocidad del fadeOut como primer parámetro

 -1
Author: Ian Oxley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-09 18:53:44