jQuery - Ajoute l'entrée/sortie de l'élément tout en conservant la disposition du flux

Question

J'ai une liste d'éléments dans mon application Web; chacun de ceux-ci a un ensemble de boutons de commande disposés en dessous.

Pour garder l'interface propre, ces boutons n'apparaissent que lorsque vous passez la souris sur l'élément. Les boutons sont enveloppés dans une balise qui a l'attribut CSS suivant: visibility: hidden

Cela préserve la mise en page - de sorte que les éléments de liste ne sautent pas autour comme les boutons sont révélés.

Ce que je veux faire est de fondre les boutons in/out en utilisant jQuery. Toutefois, les méthodes par défaut (fadeIn(), fadeOut()) semblent utiliser display: none, ce qui supprime les boutons du flux.

Ce dont j'ai besoin, c'est d'un moyen de les faire apparaître ou de les masquer en utilisant l'attribut visibility. Donc, avant que je me lance dans une recherche, quelqu'un est-il au courant d'une façon évidente de faire cela que j'ai raté?

Vive

Answer 1

Créez des DIVs wrapper vides (avec les dimensions spécifiées) pour les éléments que vous êtes en train de fondre. Fade ce qu'il y a dedans. Alternativement, vous pouvez le faire passer à 1%, donc cela prendra encore de la place, mais sera à peine visible.

Answer 2

On dirait que $ (this) .fadeTo ("lent", 0); devrait le faire, les docs ne disent rien sur le réglage de l'affichage. Seul fadeOut() a l'affichage: none; mettre dans les docs, mais donnez-moi juste un moment et je vais le tester.

Answer 3

Réaliser votre propre fadeout, comme ceci:

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