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

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)

Answer 2

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 3

Not sure this will work, but worth trying:

• Find out current div size and set it fixed.
• Update HTML
• Animate height and width to "auto".

Answer 4

Sure, you could try this:

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

Not the prettiest thing but it would work. You could pretty it up by making a CSS style for the class 'hidden_insert' that would make a element with that class hidden by default. Also, on your backend, where you are sending this date from, you could do the wrapping there instead of in your javascript. The script could then be simplified to something like:

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

I haven't tested either of these but they should work.