fadeOut（）和slideUp（）同时？

Question

我找到了jQuery: FadeOut then 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项目中使用的解决方案，您可以在其中查看dna.ui.slideFade()函数的代码（github.com/dnajs/dna.js），以查看对切换和回调的其他支持。

Answer 3

＆＃34; Nick Craver＆＃34;绝对是要走的路。我唯一要补充的是他的答案实际上并没有隐藏＆＃34;它，意味着DOM仍然将其视为可展示的可行元素。

如果您在滑动的情况下有保证金或填充，则可能会出现问题。元素......他们仍会表现出来。所以我刚刚在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

我遇到了类似的问题并修复了这个问题。

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

queue属性告诉它是否对动画进行排队或只是立即播放

Answer 6

基于@CodeKoalas在那里再抛出一个改进。它考虑了垂直边距和填充，但不是水平的。

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