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

Question

This is my code:

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

The problem is that when this loads, the page "jumps" up due to the element being rendered on page first (having a height) before the .hide().fadeIn() is triggered.. is there some other way to do this?

Answer 1

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

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

Answer 2

Hide using CSS and then fade it in when required :

css :

.items {
   display:none;
}

JavaScript

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

Answer 3

This is a cleaner solution since it avoids a flashing effect of the element being added first, then quickly having its opacity set to 0.

This way the elem is added already having an opacity of 0.

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

Answer 4

If you want to show a smooth transtion between existing content and new, try the following:

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