jQuery在执行.hide()和.fadeIn()方法之前会闪烁DIV元素。

Question

这是我的代码：

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

问题在于当页面加载时，元素首先被渲染出来（具有高度），然后才触发 .hide().fadeIn() 导致页面上下跳动。是否有其他方法可以解决这个问题？

- Mackelito

---

为什么你调用了两次hide()？一旦它被隐藏了，它应该保持隐藏状态，直到你再次调用show()。 - danwellman

哦，我的错，只是一个打字错误，我会编辑问题的！ - Mackelito

页面加载时，“.items”元素是否可见（然后，可能通过ajax调用更新）？隐藏和淡入的想法是为了吸引注意力到刚刚更新的部分吗？ - nnnnnn

Answer 1

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

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

- Steve O

---

简洁明了，为什么我没有想到呢？;)谢谢！ - Mackelito

我发现这个也可以用...哪一个更快？ $(response).hide().appendTo(ajaxElement).fadeIn(); - Mackelito

我不认为速度会有所不同...这取决于你 :) - Steve O

经过一些小测试，差异只有0.05秒，所以我猜我会选择我认为最好看的那个 :) - Mackelito

Answer 2

需要隐藏的部分，可以使用CSS隐瞒起来，然后在需要的时候通过淡入效果展现出来：

CSS代码：

.items {
   display:none;
}

JavaScript

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

- Manse

---

问题在于这是一个ajax响应...页面加载时有一些项目显示，我只是在过滤。 - Mackelito

你还有另外几个选项 - 替换HTML并突出显示div以显示其更改...附加一个div并将先前的div向上滑动，然后将新的div向上滑动....或者使用fadeOut() / fadeIn() ? - Manse

Answer 3

这是一种更干净的解决方案，因为它避免了元素先添加再迅速将其不透明度设置为0时出现闪烁效果。

这样，元素在添加时就已经具有了0的不透明度。

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

- Jared Brown

Answer 4

如果您想展示现有内容和新内容之间的平滑过渡，请尝试以下方法：

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

- Goran Mottram