Expand div with animation

Question

I have a div that is receiving content from an ajax call. Right now I am just doing this in the ajax callback handler:

function searchCallback(html) { $("#divSearchResults").html(html); }

This makes the content "pop" onto the page, and it's very abrupt. Is there a way to make the div gracefully resize, like the .slideToggle() method does?

Answer 1

Make sure its hidden, then add the content and just slide it in.

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

Or you could fade it in:

$("#divSearchResults").fadeIn();

To make sure your page doesn't "explode" when the content appears, make sure the div is hidden to being with. Also, make sure that once content is added, the page looks fine.

Answer 2

You could have it hidden to begin with. Then insert the html and when that function is done, do a show effect on it. (like your slideToggle)