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

【问题标题】：jquery Flashes Div Element Before Executing .hide() and .fadeIn() Methodsjquery 在执行 .hide() 和 .fadeIn() 方法之前闪烁 Div 元素
【发布时间】：2012-02-19 12:12:36
【问题描述】：

这是我的代码：

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

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

【问题讨论】：

为什么你得到了两次 hide()？一旦它被隐藏，它应该保持隐藏，直到你再次显示（）它
哦..我的错..只是一个错字..将编辑问题！
页面加载时“.items”元素是否可见（然后，大概是通过 ajax 调用更新）？隐藏和淡入的想法是为了引起对刚刚更新的部分的注意吗？

标签： javascript jquery hide fadein

【解决方案1】：

使用 CSS 隐藏，然后在需要时淡入：

css：

.items {
   display:none;
}

JavaScript

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

【讨论】：

问题是这是一个 ajax 响应.. 页面加载时显示的项目我只是在过滤
您还有其他几个选项 - 替换 HTML 并突出显示 div 以显示其更改...附加一个 div 并将前一个 div 向上滑动，然后将新 div 向上滑动 ....或淡出（）/淡入（）？

【解决方案2】：

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

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

【讨论】：

简洁明了.. 现在为什么我没有想到呢？ ;) 谢谢！
我发现这也有效...一个比另一个快吗？ $(response).hide().appendTo(ajaxElement).fadeIn();
我不认为速度会有所不同......这真的取决于你:)
经过一些小测试后，差异大约为 0.05 秒，所以我想我会选择我认为最好的一个 :)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：