[jQuery] Modify the show/hide function to only scale width, not height?

Question

As the title implies, I'm using jQuery's show and hide functions to hide and show elements. However, I don't want to scale in the height of the element, just the width.

I was thinking about using the animate function but I wasn't sure if this was the best way to go about it.

Also, I'd prefer not to have to set the height in the javascript as it might change in the markup.

Ideally, what I would like to happen is when the function is called to hide an element the object's width goes from it's original width to 0 and it's alpha drops to 0 then the reverse would happen when I tell it to show.

Answer 1

You want to be using the animate function:

$("div.myElement").animate({width: "toggle"});

The animating show and hide methods are mostly vanity methods that display a pretty animation. In general, you're going to want to customize the effect. You can also try:

$("div.myElement").animate({width: "toggle", opacity: "toggle"});

for a pretty widen-and-fade-in effect. And if you find yourself using these animations over and over, you can wrap them in a new jQuery method:

$.fn.myShow = function(duration) {
  return this.animate({width: "toggle", opacity: "toggle"}, duration || 1000);
});

$("div.myElement").myShow("slow");