jquery - working - Comment fondre pour afficher: inline-block




jquery hide (4)

Cela fonctionne même avec display:none preset par css. Utilisation

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

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

avec l'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 lorsqu'il est défini sur #element{display:inline-block;display:none;} mais il supprime les deux.

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

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 l'héritage?


Juste pour étoffer la bonne idée de Phil, voici un fadeIn () qui charge des fades dans chaque élément avec la classe .faded à son tour, converti 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 ça aidera un autre jQuery newb comme moi :) S'il y a une meilleure façon de le faire, s'il vous plaît dites-nous!


Selon les docs jQuery pour .show() ,

Si un élément a une valeur d'affichage en ligne, puis est masqué et affiché, il sera de 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 .show() sur l'élément, il a montré en ligne.


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





fade