jQuery: FadeOut затем SlideUp

Question

Если элемент удаляется, я хотел бы постепенно его растянуть и сдвинуть другие элементы вверх, чтобы заполнить пустое пространство. Теперь, когда я использую fadeOut() элемент не имеет высоты в конце, что приводит к тому, что другие элементы подпрыгивают (вместо того, чтобы красиво скользить).

Как мне slideUp() и элемент сразу после fadeOut()?

Answer 1

Похоже, что было бы лучше использовать команду 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
             });
         });

     });

});

Рабочая демонстрация здесь .

При выполнении каждой команды в функции обратного вызова предыдущей команды команда не будет выполняться, пока не завершится предыдущая; «прыжок» происходит, когда элемент удаляется из DOM, не дожидаясь завершения слайда.

Answer 2

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

Я протестировал его на JQuery 1.3.2, и он работает.

Редактировать: это код, с которого я его вызвал. # slide-then-fade - это идентификатор элемента кнопки, article-text - это класс в теге div:

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

Редактировать 2: модифицировано для использования встроенного слайд-апа.

Редактировать 3: переписать как переключатель и использовать fadeTo

Answer 3

Попробуйте $('.row').animate({ height: 'toggle', opacity: 'toggle' }, 'slow').slideUp();

демо Здесь

Answer 4

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

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

});

Answer 5

Разве вы не можете зацепить это?

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

EDIT

Может быть это поможет вместо этого?

Answer 6

Функция fadeOut принимает второй необязательный аргумент функции обратного вызова, поэтому вы должны иметь возможность сделать что-то подобное:

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

РЕДАКТИРОВАТЬ: забыл добавить скорость fadeOut в качестве первого параметра