jQuery fadeOut sans display aucun?

Question

Existe-t-il une alternative à fadeOut () qui n'utilise pas display: none pour le style? Je voudrais simplement utiliser la visibilité cachée pour éviter tout changement dans la mise en page?

Answer 1

Vous pouvez utiliser .animate() sur le opacity directement:

 $(".selector").animate({ opacity: 0 })
 

De cette façon , l'élément occupe toujours l' espace comme vous voulez, il a juste un 0 d' opacité, de sorte qu'il est effectivement le même que celui qu'il soit visibility: hidden quand il se termine.

Answer 2

Oui, il y a une alternative. C'est ce qu'on appelle .fadeTo() , où vous définissez l'opacité cible, qui dans votre cas sera 0 .

 $('element').fadeTo( 1000, 0 ); // fade to "0" with a 1000ms duration
 

Cela ne modifiera pas la propriété display à la fin.

Answer 3

Une façon de faire est de capturer le mode d’affichage, puis .fadeOut et, dans son intégralité, de masquer votre méthode préférée, puis de redéfinir l’affichage:

 var $element = $('#selector');

var display = $element.css('display');
$element.fadeOut(500, function() {
   $element.css('visibility', 'hidden'); 
   $element.css('display', display);
}