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

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?

48 thoughts on “jquery Flashes Div Element Before Executing .hide() and .fadeIn() Methods”

  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});
    
    Reply
  2. 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});
    
    Reply
  3. If you want to show a smooth transtion between existing content and new, try the following:

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

Leave a Comment