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 0.5s' };
   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()以查看对切换和回调的其他支持.

Answer 3

"Nick Craver"接受的答案绝对是可行的方式.我唯一要补充的是他的答案实际上并没有"隐藏"它,这意味着DOM仍然认为它是一个可行的元素来展示.

如果你在'slid'元素上有边距或填充,这可能是一个问题......它们仍会显示.所以我刚刚给animate()函数添加了一个回调,以便在动画完成后实际隐藏它:

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