jQuery 淡出而不显示无？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4549389/
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 fadeOut without display none?
提问by Kyle Rogers
Is there an alternative to fadeOut() that doesn't use display:none for the style? I'd like to just use visibility hidden to avoid any sort of shifting in the page layout?
是否有不使用 display:none 作为样式的fadeOut() 的替代方法？我只想使用隐藏的可见性来避免页面布局中的任何类型的移动？
回答by Nick Craver
You can use .animate()on the opacitydirectly:
您可以使用.animate()上opacity直接：
$(".selector").animate({ opacity: 0 })
This way the element still occupies space like you want, it just has a 0opacity, so it's effectivelythe same as it being visibility: hiddenwhen it finishes.
这样元素仍然像你想要的那样占据空间，它只是有一个0不透明度，所以它实际上和visibility: hidden它完成时的一样。
回答by user113716
Yes, there's an alternative. It's called .fadeTo(), where you set the target opacity, which in your case will be 0.
是的，有一个替代方案。它被称为.fadeTo()，您可以在其中设置目标不透明度，在您的情况下将是0.
$('element').fadeTo( 1000, 0 ); // fade to "0" with a 1000ms duration
This will not alter the displayproperty at the end.
这最终不会改变display属性。
回答by friggle
One way of doing this is to capture the display mode, then .fadeOut, and in the complete, do your preferred method of hiding, and set the display back to what it was:
这样做的一种方法是捕获显示模式，然后是 .fadeOut，最后，执行您喜欢的隐藏方法，并将显示设置回原来的状态：
var $element = $('#selector');
var display = $element.css('display');
$element.fadeOut(500, function() {
$element.css('visibility', 'hidden');
$element.css('display', display);
}
回答by friggle
Custom animation is an alternative http://api.jquery.com/animate/
自定义动画是另一种选择 http://api.jquery.com/animate/
.animate({opacity: 0.0}, 5000, 'linear', callback);
回答by jobima
I you want to fadeOut, then change the content and then fadeInagain:
我想淡出，然后更改内容，然后再次淡入：
$("#layer").animate({opacity: 0}, 1000, 'linear', function(){
//Do here any changes to the content (text, colors, etc.)
$("#layer").css('background-color','red'); //For example
$("#layer").animate({opacity: 1}); //FadeIn again
});
回答by Simon_Weaver
Note that
注意
fadeTo(500, 0) // fade out over half a second
fadeTo(0, 0) // instantly hide
is (oddly) not compatible with
与（奇怪）不兼容
fadeIn()
(when you want to show it again). So if you are using
（当您想再次显示它时）。所以如果你正在使用
fadeTo(500, 0)
fadeTo(500, 0)
in order to to hide something without the css display: nonethen you must use
为了在没有 css 的情况下隐藏某些东西，display: none那么你必须使用
fadeTo(500, 1)
fadeTo(500, 1)
to fade it back in or it will still have opacity: 0left over in the css and will remain invisible.
将其淡入，否则它仍然会opacity: 0留在 css 中并且将保持不可见。
