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

Question

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

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

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

Answer 1

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

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

Для строго FADEOUT:

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

Answer 2

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

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

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

Answer 3

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

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

slideFade($('#mySelector')); 

Fiddle с кодом:
http://jsfiddle.net/00Lodcqf

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

Это можно сделать с помощью методов slideUp и fadeOut себя так:

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