jquery .hide().fadeIn()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9017480/
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 .hide().fadeIn()
提问by Mackelito
This is my code:
这是我的代码：
$('.items').html(response).hide().fadeIn();
The problem is that when this is loaded the page "jumps" up due to that the .hide().. is there some other way to do this?
问题是，当加载这个页面时，由于 .hide().. 有其他方法可以做到这一点吗？
回答by Steve O
You could using the opacity instead if you want to keep the dimensions of the element intact:
如果要保持元素的尺寸不变，则可以改用不透明度：
$('.items').html(response).css({'opacity':0}).animate({'opacity':1});
回答by Manse
Hide using CSS and then fade it in when required :
使用 CSS 隐藏，然后在需要时将其淡入：
css :
css :
.items {
display:none;
}
JavaScript
JavaScript
$('.items').html(response).fadeIn();
$('.items').html(response).fadeIn();
回答by Jared Brown
This is a cleaner solution since it avoids a flashing effect of the element being added first, then quickly having its opacity set to 0.
这是一个更干净的解决方案，因为它避免了先添加元素的闪烁效果，然后快速将其不透明度设置为 0。
This way the elem is added already having an opacity of 0.
这样 elem 添加的不透明度为 0。
var elem = $(response).css({'opacity': 0});
$('.items').html(elem);
elem.animate({'opacity': 1});
回答by Goran Mottram
If you want to show a smooth transtion between existing content and new, try the following:
如果要在现有内容和新内容之间显示平滑过渡，请尝试以下操作：
$(function(){
$('.items').fadeOut(function(){
$(this).html(response).fadeIn();
})
});
