jQuery - fade item in/out whilst retaining flow layout

Question

I have a list of items in my web application; each of these has a set of command buttons arrayed beneath it.

To keep the interface clean, these buttons only show up when you hover over the item. The buttons are wrapped in a tag which has the following CSS attribute: visibility: hidden

This preserves the layout - so that the list items don't jump around as the buttons are revealed.

What I want to do is fade the buttons in/out using jQuery. However, the default methods (fadeIn(), fadeOut()) seem to use display: none, which removes the buttons from the flow.

What I need is a way to fade them in or out using the visibility attribute. So, before I embark on a search, does anyone know of an obvious way of doing this that I'm missing?

Cheers

Answer 1

Seems like $(this).fadeTo("slow", 0); should do it, the docs say nothing about setting display. Only fadeOut() has the display: none; set in the docs, but give me just a moment and I'll test it out.

Answer 2

Create empty wrapper DIVs (with dimensions specified) for the elements you're fading. Fade what's inside. Alternately, you can fade it to 1%, so it will still take up space, but be barely visible.

Answer 3

Roll your own fadeout, like this:

$(this).animate({opacity: "0.0"});