fadeOut()和slideUp()同时出现?

您可以这样做,这是一个完整的切换版本:

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

对于严格意义上的淡出:

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

直接设置高度动画会导致某些网页上出现不稳定的运动。但是,将CSS转换与jQuery的 slideUp()

const slideFade = (elem) => {
   const fade = { opacity: 0, transition: 'opacity 400ms' };
   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() 函数以查看对切换和回调的其他支持。

“尼克·克雷弗”接受的答案肯定是正确的。我要补充的是,他的答案实际上并没有“隐藏”它,这意味着DOM仍然将它视为一个可以显示的可行元素。

如果在“slided”元素上有margin或padding,这可能是个问题。。。他们仍然会出现。因此,我只是在animate()函数中添加了一个回调,以便在动画完成后实际隐藏它:

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

slideUp 和 fadeOut 方法本身是这样的:

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

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

queue属性告诉它是将动画排队还是立即播放

在@CodeKoalas的基础上再添加一个改进。它负责垂直边距和填充,但不负责水平边距。

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