Geek Answers Handbook

Expand div with animation

I have a div that receives content from an ajax call. Right now, I'm just doing this in the ajax callback handler:

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

This makes the content "pop" on the page and it is very cool. Is there a way to make an elegantly resized div, as does the .slideToggle () method?

+4
source share
4 answers

You could hide it from the start. Then paste the html, and when this function is completed, make a show effect on it. (e.g. your slide text)

+2
source

Make sure it's hidden, then add content and just paste it.

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

Or you can fade it into:

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

To make sure your page doesn't “explode” when the content appears, make sure the div is hidden. Also, make sure the page looks fine after adding content.

+4
source

Not sure if this will work, but worth a try:

  • Find the current div size and set it fixed.
  • Update HTML
  • Animation of height and width for "auto".
+1
source

Of course, you can try the following:

 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 will work. You could do this by creating a CSS style for the "hidden_insert" class, which by default will make an element with this class hidden. Also, on your backend where you send this date from, you can wrap it there, and not in your javascript. The script could be simplified to the following:

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

I have not tested any of them, but they should work.

+1
source

More articles:


All Articles