FadeOut() и slideUp() одновременно?

Ответ 1

Вы можете сделать что-то вроде этого, это полная версия для переключения:

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');

Для строго затухания:

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');

Ответ 2

Непосредственная анимация высоты приводит к резким движениям на некоторых веб-страницах. Однако сочетание CSS-перехода с jQuery slideUp() обеспечивает плавное исчезновение.

const slideFade = (elem) => {
   const fade = { opacity: 0, transition: 'opacity 0.5s' };
   elem.css(fade).slideUp();
   }

slideFade($('#mySelector'));

возитесь с кодом:
https://jsfiddle.net/00Lodcqf/435

В некоторых ситуациях очень быстрая 100-миллисекундная пауза для большего затухания создает немного более плавное впечатление:

   elem.css(fade).delay(100).slideUp();

Это решение, которое я использовал в проекте dna.js, где вы можете просмотреть код (github.com/dnajs/dna.js) для функции dna.ui.slideFade(), чтобы увидеть дополнительную поддержку переключения и обратные вызовы.

Ответ 3

Принятый ответ "Nick Craver" - это, безусловно, путь. Единственное, что я добавил бы, это то, что его ответ фактически не "спрятал" его, а DOM все еще видит в нем жизнеспособный элемент для отображения.

Это может быть проблемой, если у вас есть поля или отступы на элементе "slid"... они все равно будут отображаться. Поэтому я просто добавил обратный вызов функции animate(), чтобы скрыть ее после завершения анимации:

$("#mySelector").animate({ 
   height: 0, 
   opacity: 0,
   margin: 0,
   padding: 0
}, 'slow', function(){
   $(this).hide();
});

Ответ 4

Это можно сделать с помощью slideUp и fadeOut следующим образом:

$('#mydiv').slideUp(300, function(){
    console.log('Done!');
}).fadeOut({
    duration: 300,
    queue: false
});

Ответ 5

У меня была аналогичная проблема и исправил ее так.

$('#mydiv').animate({
            height: 0,
        }, {
            duration: 1000,
            complete: function(){$('#mydiv').css('display', 'none');}
        });
$('#mydiv').animate({
            opacity: 0,
        }, {
            duration: 1000,
            queue: false
        });

свойство queue сообщает ему, нужно ли очереди анимации или просто воспроизводить ее прямо сейчас

Ответ 6

Бросив еще одну доработку, основанную на @CodeKoalas. Он учитывает вертикальный запас и отступы, но не горизонтальный.

$('.selector').animate({
    opacity: 0,
    height: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
    paddingBottom: 0
}, 'slow', function() {
    $(this).hide();
});