Comment se faner pour afficher: inline-block

Dans ma page, j’ai un groupe (environ 30) de noeuds dom qui devraient être ajoutés invisibles et se fondre lorsqu’ils sont complètement chargés.
Les éléments ont besoin d’un affichage: style de bloc en ligne.

Je voudrais utiliser la fonction jquery .fadeIn () Cela nécessite que l’élément ait initialement un affichage: none; règle pour le cacher initialement. Après le fadeIn (), les éléments ont bien sûr l’affichage par défaut: inherit;

Comment puis-je utiliser la fonctionnalité de fondu avec une valeur d’affichage autre que celle héritée?

Vous pouvez utiliser la fonction animée de jQuery pour modifier l’opacité vous-même, sans affecter l’affichage.

$("div").fadeIn().css("display","inline-block");

Juste pour étoffer la bonne idée de Phil, voici un fadeIn () qui charge les fondus dans chaque élément avec la classe .faded à son tour, convertie en animate ():

Vieux:

 $(".faded").each(function(i) { $(this).delay(i * 300).fadeIn(); }); 

Nouveau:

 $(".faded").each(function(i) { $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500); }); 

J’espère que cela aidera un autre newb de jQuery comme moi 🙂 S’il y a une meilleure façon de le faire, dites-le nous!

La réponse de Makura n’a pas fonctionné pour moi donc ma solution était

  $('#div').css('display', 'inline-block').hide().fadeIn(); 

hide applique immédiatement display: none mais avant cela, il enregistre la valeur d’affichage actuelle dans le cache de données jQuery qui sera restauré par les appels d’animation suivants.

Donc, le div commence statiquement défini comme display: none . Ensuite, il est défini sur inline-block et immédiatement caché juste pour être fondu dans inline-block en inline-block

Selon les documents jQuery pour .show() ,

Si un élément a une valeur d’affichage en ligne, alors il est masqué et affiché, il sera à nouveau affiché en ligne.

Donc, ma solution à ce problème consistait à appliquer une règle css à un affichage de classe: inline-block sur l’élément, puis j’ai ajouté une autre classe appelée “hide” qui applique display: none; Quand je .show() sur l’élément, il a montré en ligne.

Cela fonctionne même avec l’ display:none prédéfini par css. Utilisation

 $('#element').fadeIn().addClass('displaytype'); 

(et aussi $('#element').fadeOut().removeClass('displaytype'); )

avec installation en CSS:

 #element.displaytype{display:inline-block;} 

Je considère cela comme une solution de contournement car je crois que fadeIn() devrait fonctionner pour supprimer la dernière règle – display:none lorsque la valeur est définie sur #element{display:inline-block;display:none;} mais en supprimant les deux.