jquery 同时淡入淡出和滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7520366/
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
jquery fade and slide simultaneously
提问by dchang
I'm trying to both slide/fade a div simultaneously on a hover, then slide/fade it out at the end of the hover, using JQuery. The slide/fade out work properly, but the slide/fade in doesn't. It just slides in without the fade. Any ideas?
我正在尝试在悬停时同时滑动/淡化 div，然后在悬停结束时使用 JQuery 将其滑动/淡化。幻灯片/淡出正常工作，但幻灯片/淡入不正常。它只是滑入而不褪色。有任何想法吗？
#myDiv {
display: none;
height: 110px;
position: absolute;
bottom: 0px; left: 0px;
}
$('#anotherDiv').hover(function() {
$('#myDiv').stop(true, true).slideDown(slideDuration).fadeIn({ duration: slideDuration, queue: false });
}, function() {
$('#myDiv').stop(true, true).slideUp(slideDuration).fadeOut({ duration: slideDuration, queue: false });
});
回答by Joseph Marikle
idk if this helps or not, but you can skip the slideUp and fadeIn shortcuts and just use animate:
idk 是否有帮助，但您可以跳过 slideUp 和fadeIn 快捷方式，只使用动画：
$('#anotherDiv').hover(function() {
$('#myDiv')
.stop(true, true)
.animate({
height:"toggle",
opacity:"toggle"
},slideDuration);
});
回答by Matt S
The answer is that once either effects activate, it takes the inline css property "display=none" off of the element. These hide effects require the display property to be set to "none". So, just rearrange the order of methods and add a css-modifier in the chain between fade and slide.
答案是，一旦任一效果激活，它就会从元素中移除内联 css 属性“display=none”。这些隐藏效果需要将显示属性设置为“无”。因此，只需重新排列方法的顺序并在淡入淡出和滑动之间的链中添加一个 css 修饰符。
$('#anotherDiv').hover(function() {
$('#myDiv').stop(true, true).fadeIn({ duration: slideDuration, queue: false }).css('display', 'none').slideDown(slideDuration);
}, function() {
$('#myDiv').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).slideUp(slideDuration);
});
回答by shalamos
Why not use jQuery to slide, and CSS transitions to fade, so they do not interfere with each other. Degrades nicely!
为什么不使用 jQuery 来滑动，而使用 CSS 过渡来淡入淡出，这样它们就不会相互干扰。降级不错！
JS:
JS：
$('#myDiv').addClass("fadingOut");
$('#myDiv').slideUp(600,function(){
$('#myDiv').removeClass("fadingOut");
});
CSS:
CSS：
.fadingOut {
transition:opacity 0.6s linear;
opacity:0;
}
