MangoOrange™

Recently, I've been using Jquery framework to do all my Javascript chores. Needless to say, I love it. Documentation rocks, easy to implement and lovely syntax. The reason I write this post is not to praise Jquery but to see whether anyone experience some kind of weirdness in their effect functions.

So weirdness came, when I fetch my information using AJAX and construct the information in HTML. Subsequently, I insert the HTML using append() and after that I slideDown() it. It works perfectly fine - no lagged.

However, when I shift the slideDown() outside of the AJAX, $.getJSON(), it gives some sort of lagged. Weird huh?

Snippet of the code below...

Lagged Version

$.getJSON("ajax/get_contact_person.php", { id : person_id }, function(json){

html += // All the HTML codes;

// Insert the retrieved information
$("div#contact_" + person_id).append(html);
});

// Slide out the information
$("div#contact_" + person_id).slideDown("medium");
Smooth Version

$.getJSON("ajax/get_contact_person.php", { id : person_id }, function(json){

html += // All the HTML codes;

// Insert the retrieved information
$("div#contact_" + person_id).append(html);

// Slide out the information
$("div#contact_" + person_id).slideDown("medium");
});
Any explanation will be grateful.

written by mangoorange