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?

Solution 1

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});

Solution 2

Hide using CSS and then fade it in when required :

css :

.items {
   display:none;
}

JavaScript

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

Solution 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});

Comments

[Mackelito]

Problem is that this is a ajax response.. there are items showing there on page load that I´m just filtering

[Mackelito]

Clean and simple.. now why didn´t I think of that? ;) Thx!

[Manse]

you have a couple of other options - replace the HTML and highlight the div to show its changed ... append a div and slide the previous div up and then slide the new div up .... or fadeOut() / fadeIn() ?

[Mackelito]

I found out that this also works... is one faster that the other? $(response).hide().appendTo(ajaxElement).fadeIn();

[Steve O]

I don't think the speed will differ...it's up to you really :)

[Mackelito]

After some minor testing the difference was like 0.05s so I quess I´ll pick the one I think looks best :)