jQuery fadeIn() powoduje display: block dla elementu liniowego

Question

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

<div></div> 

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

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

Zauważysz otrzymany przęsło ma wbudowany styl display: block; zamiast inline.

Jest uzyskany html:

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

Jak mogę uzyskać fadeIn(), aby doprowadzić do display: inline?

Answer 1

przez klonowanie oryginalnego obiektu mogę zadzwonić fadeIn i to daje mi styl inline .

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

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

Answer 2

Jestem z Adrianem; to naprawdę nie było pytanie. Ale masz rację: jQuery robi bardzo naiwne tłumaczenie właściwości wyświetlania, gdy używasz czegoś, co pokazuje/ukrywa elementy (np. Pokaż, ukryj, togle, fadeOut, itp.).

mam szczerze mówiąc nigdy nie rozumiał, dlaczego to robią (to byłoby znacznie prostsze wystarczy ustawić wyświetlanie na:

isShown ? '' : 'none'; 

zamiast ich logiki, która jest w istocie:

isShown ? 'block' : 'none'; 

) ale mają powody do prawie wszystkiego, co robią, więc wyobrażam sobie, że mają pewną logikę za ustawianiem niewłaściwych typów wyświetlania na rzeczy.

* EDIT *

Jak podejrzewałem, ludzie jQuery miał swoje powody (patrz komentarze jfriend00); również widzę, że jest teraz aktualne pytanie:

Jak uzyskać FadeIn() do wyświetlenia: Inline?

Odpowiedź brzmi, że trzeba sprawdzić, jak działa fadeIn; w zasadzie to po prostu:

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

Innymi słowy, jest to z grubsza odpowiednik:

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

(UWAGA: nie jestem faktycznie duża użytkownik funkcji animacji jQuery, więc podczas powyższy kod powinien działać , Nie składam obietnic).

Biorąc pod uwagę, że jeśli chcesz ustawić wyświetlanie na coś innego (jak mówią 'inline'), można zrobić:

this.animate({opacity: '100%'}, speed, easing, function() { 
    this.css('display', 'inline') // or you could use this.css('display', '') 
}); 

Answer 3

Właśnie znalazłem proste rozwiązanie podobnego problemu.W twoim przypadku, poprawka byłaby to:

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

Answer 4

znalazłem to niezwykle użyteczne, a nieco prostsze (na podstawie answer do this questionMakuraYami „s):

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