JQuery: FadeOut, затем SlideUp

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

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

Ответы

Ответ 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);
  }
};

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

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

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

Изменить 2: Изменено для использования встроенного слайд-модуля.

Редактирование 3: Переписано в качестве переключателя и с помощью fadeTo

Ответ 2

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

Ответ 3

Не можете ли вы его связать?

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

ИЗМЕНИТЬ

Возможно, this поможет вместо этого?

Ответ 4

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

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

});

Ответ 6

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

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

EDIT: забыл добавить скорость fadeOut в качестве первого параметра