jquery .hide（）。fadeIn（）

Question

这是我的代码：

$('.items').html(response).hide().fadeIn();

问题在于，当加载它时页面会“跳”起来，因为.hide（）..还有其他一些方法吗？

Answer 1

如果要保持元素的尺寸不变，可以使用不透明度：

$('.items').html(response).css({'opacity':0}).animate({'opacity':1});

Answer 2

隐藏CSS，然后在需要时将其淡入：

css：

.items {
   display:none;
}

的JavaScript

$('.items').html(response).fadeIn();

Answer 3

这是一个更清洁的解决方案，因为它避免了首先添加元素的闪烁效果，然后快速将其不透明度设置为0。

这样添加的元素已经具有0的不透明度。

var elem = $(response).css({'opacity': 0});
$('.items').html(elem);
elem.animate({'opacity': 1});

Answer 4

如果要显示现有内容与新内容之间的平滑过渡，请尝试以下操作：

$(function(){
    $('.items').fadeOut(function(){
      $(this).html(response).fadeIn();   
    })
});