Javascript 是否同时使用淡出（）和滑动（）？

我找到了，很好，但不是那个

我怎样才能同时使用

fadeOut（）

和

slideUp（）

？我尝试了两个独立的

setTimeout（）

调用，但延迟相同，但是

slideUp（）

一加载页面就发生了

---

有人这样做过吗？

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

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

对于严格意义上的淡出：

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

---

我有一个类似的问题，就这样解决了

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

---

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

直接为高度设置动画会导致某些网页上的抖动运动。但是，将CSS转换与jQuery的

slideUp（）

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

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

slideFade($('#mySelector'));

篡改代码：

在某些情况下，非常快的100毫秒暂停以允许更多的衰减，会产生稍微平滑的体验：

   elem.css(fade).delay(100).slideUp();

这是我在dna.js项目中使用的解决方案，您可以在其中查看

dna.ui.slideFade（）

函数的代码（），以查看对切换和回调的额外支持。

Nick Craver接受的答案肯定是可行的。我要补充的唯一一点是，他的答案实际上并没有“隐藏”它，这意味着DOM仍然将它视为可以显示的可行元素

如果“滑动”元素上有边距或填充，则可能会出现问题。。。他们仍然会表现出来。所以我只是在animate（）函数中添加了一个回调函数，以便在动画完成后将其隐藏：

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

---

在@CodeKoalas的基础上再添加一个改进。它考虑了垂直边距和填充，但不考虑水平边距

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

---

使用

slideUp

和

fadeOut

方法本身可以做到这一点，如下所示：

$（'#mydiv'）.slideUp（300，function（）{
console.log（'Done！'）；
}).淡出({
持续时间：300，
队列：false
});

@Powerlord-Woops你说得对，在这里测试节目，多汉克斯。尼克·克雷弗（Nick Craver）接受的答案并不适用于我，因为考拉的答案中提到了这个原因。但是，我更喜欢您的代码，因为它允许您为淡入和不透明度效果设置不同的计时。（例如，我喜欢将“淡入淡出”设置为比幻灯片稍快一点时的外观。）但是，我不确定您的平滑度要求。在我的电脑上，你的代码在IE中产生的效果是平滑的，但在Chrome中不是特别平滑。这个效果更好！我改为marginTop/Bottom和paddingTop/Bottom，使它看起来更漂亮。