jquery .hide() fadeIn()

Question

Đây là mã của tôi:

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

Vấn đề là khi điều này được nạp trang "nhảy" lên do rằng .hide() .. là có một số cách khác để làm điều này?

Answer 1

Bạn có thể sử dụng opacity thay vì nếu bạn muốn giữ lại kích thước của phần tử còn nguyên vẹn:

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

Answer 2

Hide sử dụng CSS và sau đó mờ dần nó trong khi có yêu cầu:

css:

.items { 
    display:none; 
} 

Javascript

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

Answer 3

Nếu bạn muốn hiển thị một transtion suôn sẻ giữa nội dung hiện có và mới, hãy thử như sau:

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

Answer 4

Đây là một giải pháp sạch hơn vì nó tránh được một hiệu ứng nhấp nháy của nguyên tố này được bổ sung đầu tiên, sau đó nhanh chóng có opacity của nó thiết lập để 0.

Bằng cách này, elem được thêm vào đã có một độ mờ đục của 0.

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