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()

相结合可以实现平滑的消失动作。

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-engine 项目中使用的解决方案，您可以在其中查看 dna.ui.slideFade() 函数的代码 (

github.com/dna-engine/dna-engine

)，以查看对切换和回调的额外支持。

Answer 3

“Nick Craver”接受的答案绝对是要走的路。我唯一要补充的是，他的回答实际上并没有“隐藏”它，这意味着 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();
});