jQuery fadeIn() résultats en display: block pour élément inline

http://jsfiddle.net/chovy/dk5Ua/

<div></div>

var $span = $('<span>foo</span>');

$span.hide();
$("div").append($span);
$span.fadeIn();

Vous remarquerez l'résultant de la durée de a de style en ligne display: block; au lieu de la ligne.

C'est le html résultant:

<span style="display: block;">foo</span>

Comment puis-je obtenir le fadeIn() pour aboutir à display: inline?

Attends, c'est quoi la question?
Il a l'air assez en ligne pour moi.
en coulisse, c'est le bloc. J'ai mis à jour la question.

OriginalL'auteur chovy | 2012-11-08

  1. 15

    Je viens de trouver une solution simple à un problème similaire. Dans votre cas, la solution serait ceci: 

    $span.css('display', 'inline').hide().fadeIn();

    OriginalL'auteur Shomz

  2. 4

    Je suis avec Adrian; ce n'était vraiment pas une question. Mais vous avez raison: jQuery est très naïf de traduction des propriétés d'affichage lorsque vous utilisez quelque chose que montrer/cacher des éléments (par exemple. afficher, masquer, togle, fadeOut, etc.).

    Honnêtement, je n'ai jamais compris pourquoi ils le font (ce serait beaucoup plus simple de simplement définir d'affichage de:

    isShown ? '' : 'none';

    au lieu de leur logique, qui est essentiellement:

    isShown ? 'block' : 'none';

    ), mais ils ont des raisons pour à peu près tout ce qu'ils font, donc j'imagine qu'ils ont une certaine logique derrière le réglage de l'affichage erroné des types sur les choses.

    * EDIT *

    Comme je le soupçonnais, le jQuery, les gens ont leurs raisons (voir les commentaires de jfriend00); aussi je vois qu'il y a une réelle question dans la question maintenant:

    Comment puis-je obtenir le fadeIn() pour aboutir à display: inline?

    La réponse est que vous avez besoin de regarder comment fadeIn œuvres; essentiellement, c'est juste:

    this.animate({opacity: "show"}, speed, easing, callback );

    En d'autres termes, c'est à peu près équivalent à:

    this.animate({opacity: '100%'}, speed, easing, function() {
    this.css('display', 'block')
});

    (AVERTISSEMENT: je ne suis pas un grand utilisateur de jQuery fonctions d'animation, de sorte que tout le code ci-dessus devrait fonctionner, je ne fais pas de promesses).

    Étant donné que, si vous souhaitez régler l'affichage de quelque chose d'autre (comme, disons,'inline'), vous pouvez le faire:

    this.animate({opacity: '100%'}, speed, easing, function() {
    this.css('display', 'inline') //or you could use this.css('display', '')
});
    Ils ne peuvent probablement pas utiliser isShown ? '' : 'none'; parce qu'ils ont pour remplacer tous les CSS qui pourraient être en vigueur et de l'affichage de réglage à '' permettrait à la CSS être en effet, plutôt que de forcer l'objet à afficher.
    J'imagine que c'est parce que les éléments en ligne, étant une partie du flux, causer plus de perturbations lors de la modification de leurs propriétés d'affichage, comme ils ont la force d'une redistribution de tout autour d'eux? Je suppose que vous pourriez animer un changement dans rgba() sur l'élément, mais qui ne serait pas pris en charge très bien sur tous les navigateurs, soit.
    Il n'est pas "autoriser le CSS en vigueur"; il remplace quelle que soit la valeur existante est là, avec '', qui (dans tous les navigateurs, je le sais) définit la propriété à sa valeur par défaut (qui sera la bonne display type, par exemple. inline pour les portées, bloc de vrd, etc.).
    Qui pourrait être la raison, bien que personnellement je préfère avoir un peu plus de remboursements et l'affichage correct des types /haussement d'épaules
    vous n'avez pas compris mon commentaire. Réglage style.display='' définit la valeur par défaut, qui permet de règles CSS dans un fichier de style spécifié par un sélecteur (pas spécifiquement sur l'attribut style de l'objet). Réglage style.display = 'inline' ou style.display = 'block' remplace les règles CSS de donner un résultat connu. Il ya une différence et jQuery veut sans doute pour remplacer les règles CSS pour arriver à un résultat connu.

    OriginalL'auteur machineghost

  3. 1

    J'ai trouvé cela très utile, et un peu plus simple (basé sur MakuraYami's réponse à cette question):

    $span.fadeIn().css('display', 'inline');

    OriginalL'auteur Chris Kempen

  4. 0

    Par le clonage de l'objet d'origine, je peux appeler fadeIn et il me donne un style en ligne.

    var $htm = $('<span/>')
, $divs = $('div');

$divs.replaceWith(function(){
   return $htm.clone().fadeIn(2000);
});

    OriginalL'auteur chovy