Question

I have a jQuery script that makes it so that it displays Please Wait, for 3 seconds, then displays a DIV. Now the issue I’m having is that when I do display: none; it is causing width and height of my other div’s to distort. Is there another method of hiding the div during the function that may not disrupt?

jQuery used

setTimeout(function(){
    $("#loading").hide(100); //100 = animation speed in miliseconds
    $("#quickstats").show(100);
}, 3000); //3000 miliseconds = 3 seconds​​​​​​​​​​​​​​​​​​​

Answer 1

Assuming that the #loading DIV and #quickstats DIV have the same width, you can try:

setTimeout(function(){
    $("#loading").animate({opacity: 0}, 100, function() {
        $(this).hide();
        $("#quickstats").css({opacity: 0}).show().animate({opacity: 1}, 100);
    });
}, 3000);

Demo: http://jsfiddle.net/XUSM2/

Demo (on page load): http://jsfiddle.net/XUSM2/1/