fadeOut()和slideUp()同时?

时间:2010-03-05 14:47:32

标签: javascript jquery fade

我找到了jQuery: FadeOut then SlideUp,这很好,但不是那个。

我如何同时fadeOut()slideUp()?我尝试了两次具有相同延迟的setTimeout()次呼叫,但是一旦页面加载就发生了slideUp()

有没有人这样做过?

6 个答案:

答案 0 :(得分:103)

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

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

对于严格的淡出:

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

答案 1 :(得分:21)

直接设置动画高度会导致某些网页出现抖动。但是,将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

bye

在某些情况下,非常快的100毫秒暂停以允许更多的褪色会带来更轻松的体验:

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

这是我在dna.js项目中使用的解决方案,您可以在其中查看dna.ui.slideFade()函数的代码(github.com/dnajs/dna.js),以查看对切换和回调的其他支持。

答案 2 :(得分:10)

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

如果您在滑动的情况下有保证金或填充,则可能会出现问题。元素......他们仍会表现出来。所以我刚刚在animate()函数中添加了一个回调函数,以便在动画完成后实际隐藏它:

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

答案 3 :(得分:3)

可以使用slideUpfadeOut方法自行执行此操作:

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

答案 4 :(得分:2)

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

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

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

答案 5 :(得分:2)

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

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