Javascript 淡出（）和滑动（）在同一时间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2387515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fadeOut() and slideUp() at the same time?
提问by Matthew
I have found jQuery: FadeOut then SlideUpand it's good, but it's not the one.
我找到了jQuery: FadeOut 然后是 SlideUp，它很好，但不是那个。
How can I fadeOut()and slideUp()at the same time? I tried two separate setTimeout()calls with the same delay but the slideUp()happened as soon as the page loaded.
我怎样才能fadeOut()和slideUp()同时？我尝试了两个setTimeout()具有相同延迟的单独调用，但是slideUp()一旦页面加载就发生了。
Has anyone done this?
有没有人做过这个？
回答by Nick Craver
You can do something like this, this is a full toggle version:
你可以做这样的事情，这是一个完整的切换版本：
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
对于严格的淡出：
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
回答by Dem Pilafian
Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp()makes for a smooth disappearing act.
直接设置高度动画会导致某些网页上出现抖动。但是，将 CSS 过渡与 jQuery 相结合slideUp()可以实现平滑的消失。
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 0.5s' };
elem.css(fade).slideUp();
}
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
摆弄代码：https:
//jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
在某些情况下，非常快速的 100 毫秒暂停以允许更多淡入淡出会创建稍微更平滑的体验：
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade()function to see additional support for toggling and callbacks.
这是我在 dna.js 项目中使用的解决方案，您可以在其中查看该函数的代码 ( github.com/dnajs/dna.js)，dna.ui.slideFade()以查看对切换和回调的额外支持。
回答by CodeKoalas
The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
“Nick Craver”接受的答案绝对是要走的路。我唯一要补充的是，他的回答实际上并没有“隐藏”它，这意味着 DOM 仍然将其视为一个可行的显示元素。
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
如果“滑动”元素上有边距或填充，这可能是一个问题……它们仍然会显示。所以我只是在 animate() 函数中添加了一个回调，以在动画完成后实际隐藏它：
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});
回答by CupOfTea696
It's possible to do this with the slideUpand fadeOutmethods themselves like so:
可以像这样使用slideUp和fadeOut方法本身来做到这一点：
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});
回答by nathancahill
Throwing one more refinement in there based on @CodeKoalas. It accounts for vertical margin and padding but not horizontal.
基于@CodeKoalas 再进行一次改进。它考虑了垂直边距和填充，但不考虑水平。
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});
回答by Rob
I had a similar problem and fixed it like this.
我有一个类似的问题并像这样修复它。
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away
queue 属性告诉它是将动画排入队列还是立即播放
