同时使用fadeOut()和slideUp()？
同时使用fadeOut()和slideUp()？
提问于 2010-03-05 22:47:32
我已经找到了jQuery: FadeOut then SlideUp，它很好，但它不是我想要的。
怎样才能同时使用fadeOut()和slideUp()？我尝试了两次具有相同延迟的独立setTimeout()调用，但页面一加载，slideUp()就发生了。
有人这么做过吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-03-05 22:50:26
你可以这样做，这是一个完全切换的版本：
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');对于严格的淡入淡出：
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');Stack Overflow用户
发布于 2014-10-13 03:39:37
直接设置高度动画会导致某些网页出现抖动。但是，将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项目中使用的解决方案，您可以在其中查看dna.ui.slideFade()函数的代码(github.com/dnajs/dna.js)，以了解对切换和回调的其他支持。
Stack Overflow用户
发布于 2015-02-21 06:28:37
"Nick Craver“公认的答案绝对是正确的选择。我要补充的唯一一件事是，他的答案实际上并没有“隐藏”它，这意味着DOM仍然将其视为可显示的可行元素。
这可能是一个问题，如果你有‘滑块’元素的边距或填充…他们还是会出现的。因此，我只是向animate()函数添加了一个回调，以便在动画完成后将其真正隐藏起来：
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2387515
复制相关文章
相似问题