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

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

Hide using CSS and then fade it in when required :

css :

.items {
   display:none;
}

JavaScript

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

Answer 2

You could using the opacity instead if you want to keep the dimensions of the element intact:

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