jquery/javascript wait for a function to complete

Question

I have script that performs from DOM manipulation to change the way a div looks. The way the application is, when the page loads, the div is rendered in its original state, the function manipulates the DIV. The problem is it renders the original div before rendering the changed div.

I tried:

//Make div invisible

//Call function to change the DIV

//Make div visible

This does not work

Answer 1

$('div').hide(function(){
 $(this).css('font-size', '5em');
 $(this).find('h1').css('color','red');
 $(this).show();
})

This MUST work ;)

Answer 2

Are you using the visibility attribute?

<div id="divy" style="display:none;">Wee</div>

or set the style in a .css file

$(document).ready(function(){
   $("#divy").css("color", "#424242");
   $("#divy").show();
});

Answer 3

If you don't want it showing right away, you should just hide it with CSS (rather than JS). Then you run your change function and display it.

Answer 4

Are you just trying to keep the div visible while preventing the changes from being seen? You could probably make it happen by cloning the div, making your changes on the cloned div, then replacing the original div with the cloned, changed div. Something like:

var changed_cloned_div = make_changes( $('#original_div').clone() );
$('#original_div').replaceWith( changed_cloned_div );