web-dev-qa-db-fra.com

Comment se faner pour afficher: inline-block

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 ont besoin d’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 fadeIn (), les éléments en dehors de la route ont l’affichage par défaut: inherit;

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

jqueryfade
94
Boris Callens

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

38
philnash

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

223
MakuraYami

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!

11
Mere Development

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.

Donc, la div commence statiquement définie comme étant display: none. Ensuite, il est réglé sur inline-block et immédiatement caché pour être fondu dans inline-block

8
Clodoaldo Neto

Selon les docs jQuery pour .show(), 

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

Ma solution à ce problème a donc été d'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é inline. 

2
amurrell

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

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

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

avec une configuration en CSS:

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

Je considère cela comme une solution de contournement, car je pense que fadeIn() devrait fonctionner de manière à supprimer simplement la dernière règle - display:none lorsqu'elle est définie sur #element{display:inline-block;display:none;}, mais elle supprime les deux à la fois.

0
Fanky