61

我发现jQuery: FadeOut 然后 SlideUp很好，但不是那个。

我怎么能fadeOut()和slideUp()同时？我尝试了两个setTimeout()具有相同延迟的单独调用，但是slideUp()页面加载后就发生了。

有人做过吗？

4

6 回答 6

108

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

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

对于严格的淡出：

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
于 2010-03-05T14:50:25.763 回答
22

直接对高度进行动画处理会导致某些网页上出现抖动。然而，将 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()以查看对切换和回调的额外支持。

于 2014-10-12T19:39:37.053 回答
14

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

如果您在“滑动”元素上有边距或填充，这可能是一个问题......它们仍然会显示。所以我只是在 animate() 函数中添加了一个回调，以便在动画完成后实际隐藏它：

$("#mySelector").animate({ 
   height: 0, 
   opacity: 0,
   margin: 0,
   padding: 0
}, 'slow', function(){
   $(this).hide();
});
于 2015-02-20T22:28:37.307 回答
3

slideUp可以像这样使用andfadeOut方法本身来做到这一点：

$('#mydiv').slideUp(300, function(){
    console.log('Done!');
}).fadeOut({
    duration: 300,
    queue: false
});
于 2018-01-11T18:45:57.727 回答
2

我有一个类似的问题并像这样修复它。

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

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

于 2011-12-16T19:17:17.523 回答
2

基于@CodeKoalas 再进行一项改进。它考虑了垂直边距和填充，但不考虑水平。

$('.selector').animate({
    opacity: 0,
    height: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
    paddingBottom: 0
}, 'slow', function() {
    $(this).hide();
});
于 2015-07-08T21:20:38.987 回答