jQuery Animation - Smooth Size Transition

Question

So this might be really simple, but I haven't been able to find any examples to learn off of yet, so please bear with me. ;)

Here's basically what I want to do:

<div>Lots of content! Lots of content! Lots of content! ...</div>

.... 

$("div").html("Itsy-bitsy bit of content!");

I want to smoothly animate between the dimensions of the div with lots of content to the dimensions of the div with very little when the new content is injected.

Thoughts?

Answer 1

maybe something like this?

$(".testLink").click(function(event) {
 event.preventDefault();
 $(".testDiv").hide(400,function(event) {
  $(this).html("Itsy-bitsy bit of content!").show(400);
 });
});

Close to what I think you wanted, also try slideIn/slideOut or look at the UI/Effects plugin.

Answer 2

You can use the animate method.

$("div").animate({width:"200px"},400);

Answer 3

Hello meyahoocoma4c5ki0pprxr19sxhajsogo6jgks5dt.

You could wrap the 'content div' with an 'outer div' which is set to an absolute width value. Inject the new content with a "hide()" or "animate({width})" method, shown in the other answers. This way, the page doesn't reflow in between because the wrapper div holds a steady width.

Answer 4

Try this jQuery plugin:

// Animates the dimensional changes resulting from altering element contents
// Usage examples: 
//    $("#myElement").showHtml("new HTML contents");
//    $("div").showHtml("new HTML contents", 400);
//    $(".className").showHtml("new HTML contents", 400, 
//                    function() {/* on completion */});
(function($)
{
   $.fn.showHtml = function(html, speed, callback)
   {
      return this.each(function()
      {
         // The element to be modified
         var el = $(this);

         // Preserve the original values of width and height - they'll need 
         // to be modified during the animation, but can be restored once
         // the animation has completed.
         var finish = {width: this.style.width, height: this.style.height};

         // The original width and height represented as pixel values.
         // These will only be the same as `finish` if this element had its
         // dimensions specified explicitly and in pixels. Of course, if that 
         // was done then this entire routine is pointless, as the dimensions 
         // won't change when the content is changed.
         var cur = {width: el.width()+'px', height: el.height()+'px'};

         // Modify the element's contents. Element will resize.
         el.html(html);

         // Capture the final dimensions of the element 
         // (with initial style settings still in effect)
         var next = {width: el.width()+'px', height: el.height()+'px'};

         el .css(cur) // restore initial dimensions
            .animate(next, speed, function()  // animate to final dimensions
            {
               el.css(finish); // restore initial style settings
               if ( $.isFunction(callback) ) callback();
            });
      });
   };


})(jQuery);

Answer 5

Here is how I fixed this, I hope this will be usefull ! The animation is 100% smooth :)

HTML:

<div id="1"><div id="2">Some content here</div></div>

Javascript:

// tempory fix the outer div's width
$("#1").css({width: $("#2").width()});
// fade out inner div
$("#2").fadeOut('slow' , function(){
    // change the div content
    $("#1").html("<div id=\"2\" style=\"display: none;\">new content (with a new width)</div>", function(){
     // give the outer div the same width as the inner div with a smooth animation
     $("#1").animate({width: $("#2").width()}, function(){
      // show the inner div
      $("#2").fadeIn('slow');
     });
    });
});

There might be a shorter version of my code, but I just kept it like this.