Comment se faner pour afficher: inline-block

Question

Dans ma page, j'ai un groupe (environ 30) de nœuds dom qui doivent être ajoutés de manière invisible et s’affichent en fondu quand ils sont complètement chargés.
Les éléments nécessitent un affichage: style inline-block.

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 hors parcours ont l’affichage par défaut: inherit;

Comment utiliser la fonctionnalité de fondu avec une valeur d'affichage autre qu'hériter?

Answer 1

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

Answer 2

Vous pouvez utiliser la fonction animate de jQuery pour modifier l'opacité vous-même, en ne laissant pas l'affichage affecté.

Answer 3

Juste pour préciser la bonne idée de Phil, voici un fadeIn () qui charge les fondus dans chaque élément avec la classe .faded convertie à son tour 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 jQuery comme moi :) S'il y a une meilleure façon de le faire, dites-le-nous!

Answer 4

La réponse de Makura n'a pas fonctionné pour moi alors ma solution était

 <div id="div" style="display: none">Some content</div>

$('#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.

Ainsi, les div commencent statiquement définis comme display: none . Ensuite, il est défini sur inline-block et immédiatement caché pour être atténué dans inline-block

Answer 5

Selon le jQuery docs .show(),

Si un élément a une valeur d'affichage en ligne, alors il est caché et le montré, il sera de nouveau affiché en ligne.

Donc ma solution à ce problème est d'appliquer une règle css à une classe display: inline-block sur l'élément, puis j'ai ajouté une autre classe appelée "peau", qui s'applique display: none; Lorsque je l'ai utilisé .fadeIn() ou .show() sur l'élément, il a montré la ligne.