jquery .hide (). fadeIn ()

Question

Это мой код:

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

Проблема в том, что при загрузке страница «подпрыгивает» из-за этого .hide () .. есть ли другой способ сделать это?

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.

Таким образом, элемент добавляется с непрозрачностью 0.

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

Answer 4

Если вы хотите показать плавный переход между существующим контентом и новым, попробуйте следующее:

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