Comment faire un fondu pour afficher: bloc en ligne

98

Dans ma page, j'ai un tas (environ 30) nœuds dom qui devraient être ajoutés invisibles, et fondus lorsqu'ils sont complètement chargés.
Les éléments ont besoin d'un affichage: style bloc en ligne.

Je voudrais utiliser la fonction jquery .fadeIn (). Cela nécessite que l'élément ait initialement un affichage: aucun; règle pour le cacher dans un premier temps. Après le fadeIn (), les éléments hors course ont l'affichage par défaut: inherit;

Comment puis-je utiliser la fonctionnalité de fondu avec une valeur d'affichage autre que inherit?

jquery fade Boris Callens
la source

Réponses:

39

Vous pouvez utiliser la fonction d' animation de jQuery pour changer l'opacité vous-même, laissant l'affichage inchangé.

Philnash
la source
J'aime mieux cette solution, garde le CSS hors de mon JS.
joshuadelange
14
@joshuadelange pas vraiment, l'opacité est aussi CSS
Roy
+1 pour concentrer le processus d'ingénierie consistant à montrer / masquer les éléments là où ils devraient être.
klewis
233

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

MakuraYami
la source
5
C'est certainement la meilleure réponse.
Jason
25
Très bonne réponse! Mieux encore, vous pouvez le laisser vide par défaut sur tout ce que vous avez dans votre CSS:$("div").fadeIn().css("display","");
Brandon Durham
1
Cela devrait vraiment être la réponse acceptée; la réponse acceptée existante est davantage un commentaire.
Sinister Beard
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });pour être sûr que display: inline-block est terminé lorsque le fadein est terminé
Simon
cela ne fonctionne pas pour moi ... appliqué sur un div avec un style d'affichage initial défini sur aucun en utilisant une classe. En inspectant l'élément, je vois que pendant quelques millisecondes, juste après avoir appelé le fadeIn, il a un bloc en ligne dans son style, puis le style est réglé sur bloquer. avec la suggestion de Simon, l'effet n'est pas agréable, car pendant le fondu, l'élément est affiché sous forme de bloc
Giox
11

Juste pour étoffer la bonne idée de Phil, voici un fadeIn () qui charge des 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 jQuery comme moi :) S'il y a une meilleure façon de le faire, dites-le nous!

Développement simple
la source
9

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

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

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

hides'applique immédiatement display: nonemais 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, les divdéparts statiquement définis comme display: none. Ensuite, il est défini inline-blocket immédiatement masqué pour être effacé versinline-block

Clodoaldo Neto
la source
2

Selon la documentation jQuery pour .show(),

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

Donc ma solution à ce problème était 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 suis .show()sur l'élément, il a montré en ligne.

Amurrell
la source
Je suppose que cela devrait également fonctionner lorsque vous définissez #el{display:inline-block;display:none;}, puis exécutez, $('#el').fadeIn();vous obtenez un bloc en ligne. Mais ce n'est pas le cas.
Fanky
0

Cela fonctionne même avec le display:nonepreset par css. Utilisation

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

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

avec configuration en CSS:

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

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

Fanky
la source