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

Roll your own fadeout, like this:

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