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?

Why have you got hide() twice? Once it is hidden it should stay hidden until you show() it again — danwellman, Jan 26 '12 at 11:30
Are the ".items" elements visible when the page loads (and then, presumably, updated via an ajax call)? Is the idea of the hide and fade-in to draw attention to the bit that was just updated? — nnnnnn, Jan 26 '12 at 11:36

score 20 · Accepted Answer · answered Jan 26 '12 at 11:35

20

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

answered Jan 26 '12 at 11:35

Steve O

5,224
1
24
26

Clean and simple.. now why didn´t I think of that? ;) Thx! – Mackelito Jan 26 '12 at 11:36
1

I found out that this also works... is one faster that the other? $(response).hide().appendTo(ajaxElement).fadeIn(); – Mackelito Jan 26 '12 at 11:50
I don't think the speed will differ...it's up to you really :) – Steve O Jan 26 '12 at 11:53
After some minor testing the difference was like 0.05s so I quess I´ll pick the one I think looks best :) – Mackelito Jan 26 '12 at 11:55

score 6 · Answer 2 · answered Jan 26 '12 at 11:33

6

Hide using CSS and then fade it in when required :

css :

.items {
   display:none;
}

JavaScript

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

answered Jan 26 '12 at 11:33

Manse

37,765
10
83
108

Problem is that this is a ajax response.. there are items showing there on page load that I´m just filtering – Mackelito Jan 26 '12 at 11:35
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() ? – Manse Jan 26 '12 at 11:37

Jared Brown · Answer 3 · 2013-02-02T20:29:42.523

1

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

edited Feb 02 '13 at 20:29

answered Feb 02 '13 at 19:51

Jared Brown

1,949
4
20
28

score 0 · Answer 4 · answered Jan 26 '12 at 11:39

0

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

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

answered Jan 26 '12 at 11:39

Goran Mottram

6,244
26
41

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

4 Answers4