jquery 在执行 .hide() 和 .fadeIn() 方法之前闪烁 Div 元素

Question

这是我的代码：

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

问题是，当加载时，页面会“跳跃”起来，因为元素在 .hide().fadeIn() 之前首先在页面上呈现（具有高度）被触发..还有其他方法可以做到这一点吗？

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 的闪烁效果。

这样，添加的 elem 的不透明度就已经为 0。

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

Answer 4

如果您想在现有内容和新内容之间实现平滑过渡，请尝试以下操作：

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