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?

Réponses:


39

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


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");


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!


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


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.


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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.