extend element height by sliding (as opposed to abruptly expanding)

Question

Hi folks, i would like to expand the height of the box when it is clicked on.

 $(this).find("textarea").css("height","2.6em").focus();

The code above expands the box, but does so abruptly.

How can i make it do so in a sliding manner that is much more elegant?

Answer 1

You can use .animate() instead of .css(), like this:

$(this).find("textarea").animate({ height: "2.6em" }).focus();

Some browsers lose the focus on animation though, I recall from a question a few weeks back, you may need to do this instead:

$(this).find("textarea").animate({ height: "2.6em" }, function() {
  $(this).focus();
})

Answer 2

Take a look at jQuery's animate function:

$(this).find("textarea").animate({
    height: "2.6em"
  }

Answer 3

The size effect will do this smoothly. Animate, also.

$(this).find("textarea").effect("size", { to: {height: 2.6em} }, 1000).focus();;