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

jquery Flashes Div Element Before Executing .hide() and .fadeIn() Methods

本文关键字：闪烁 元素 Div 方法 执行 hide jquery fadeIn      更新时间：2023-09-26

这是我的代码：

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

问题是当加载时；跳跃"；由于在触发.hide().fadeIn()之前元素首先在页面上呈现（具有高度），因此向上。。有别的办法吗？

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

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

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

css：

.items {
   display:none;
}

JavaScript

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

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

通过这种方式添加的elem已经具有0的不透明度。

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

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

$(function(){
    $('.items').fadeOut(function(){
      $(this).html(response).fadeIn();   
    })
});
相关文章：