jQuery fadeIn() ekranda sonuçları: inline elemanı için blok

Question

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

<div></div> 

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

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

Sen sonuçlanan yayılma satır içi stil display: block; yerine inline vardır fark edeceksiniz.

Bu sonuçlanan html geçerli: inline: Ben fadeIn() ekrana sonuçlanması nasıl alabilirim

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

?

Answer 1

ve bana bir satır içi stil verir .

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

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

Answer 2

Adrian'la birlikteyim; Bu gerçekten bir soru değildi. Ama siz haklısınız: jQuery, öğeleri gösterme/gizleme (örn. Göster, gizle, togle, fadeOut, vb.) Kullanan herhangi bir şey kullandığınızda ekran özelliklerinin çok naif bir çevirisini yapar.

isShown ? 'block' : 'none'; 

: yerine temelde kendi mantığı, bir

isShown ? '' : 'none'; 

:

dürüstçe bu (çok daha basit olurdu yapmak neden sadece ekranı ayarlamak için hiçbir zaman anlayamadım) Ama onlar yaptıkları her şey için nedenleri var, bu yüzden şeyler üzerinde yanlış görüntü türleri ayarlama arkasında bir mantık var sanırım.

* DÜZENLEME *

şüphelendiğim gibi jQuery insanların nedenlerini (jfriend00 yorumlarını görebilirsiniz) var mı; Ayrıca şu anda soruda gerçek bir soru olduğunu görüyorum:

Ekranda görüntülenmek üzere fadeIn() öğesini nasıl alabilirim?

Yanıt, fadeIn'in nasıl çalıştığına bakmanız gerektiğidir; Başka bir deyişle,

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

o kabaca eşdeğer: aslında bu sadece

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

(UYARI: Yukarıdaki kod çalışması gerekirken bu yüzden, aslında jQuery'nin animasyon özelliklerinin büyük bir kullanıcı değilim , Söz vermiyorum).

Verilen sen (gibi 'inline' demek) başka bir şey ekranı ayarlamak isterseniz, yapabileceğiniz, o: Ben fadein çağırabilir orijinal nesneyi klonlama ile

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

Answer 3

Benzer bir soruna basit bir çözüm buldum.Senin durumunda, düzeltme bu olacaktır:

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

Answer 4

Ben bu son derece yararlı, ve biraz daha basit bulundu (MakuraYami 'ın answerthis question için dayalı):

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