我找到了jQuery: FadeOut then SlideUp,这很好,但不是那个。
我如何同时fadeOut()
和slideUp()
?我尝试了两次具有相同延迟的setTimeout()
次呼叫,但是一旦页面加载就发生了slideUp()
。
有没有人这样做过?
答案 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
在某些情况下,非常快的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)
可以使用slideUp
和fadeOut
方法自行执行此操作:
$('#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();
});