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

Question

Я нашел jQuery: FadeOut, затем SlideUp , и это хорошо, но это не тот.

Как я могу fadeOut() и slideUp() одновременно? Я попробовал два отдельных setTimeout() вызова с одинаковой задержкой, но slideUp() произошел, как только страница загрузилась.

Кто-нибудь делал это?

Answer 1

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

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

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

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

Answer 2

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

function 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(), чтобы увидеть дополнительную поддержку переключения и обратные вызовы.

Answer 3

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

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

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

Answer 4

Это можно сделать с помощью самих методов slideUp и fadeOut, например:

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

Answer 5

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

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

Answer 6

У меня была похожая проблема, и я исправил ее следующим образом.

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

свойство очереди указывает, стоит ли ставить анимацию в очередь или просто воспроизвести ее сразу