響應文本無法正常使用fittext.js和jquery淡入

Question

我正在使用fittext.js使文本響應，並且我有3個div，當點擊相應的鏈接時變爲可見。 divs包含h2標籤。問題是，當我使用淡入淡出效果時，文本不顯示。請幫我

HTML

<a id="one" href="#">one</a> 
<a id="two" href="#">two</a> 
<a id="three" href="#">three</a> 

<div class="one content"> 
    <h2>one</h2> 
</div> 
<div class="two content"> 
    <h2>two</h2> 
</div> 
<div class="three content"> 
    <h2>three</h2> 
</div> 

CSS

.content { 
    background: red; 
    width: 500px; 
    height: 100px; 
    margin: 10px; 
} 
.content { 
    display: none; 
} 
h2 { 
    font-size: 60px; 
    height: 100%; 
} 

JQuery的

$("a").click(function() { 
     var cls = $(this).attr('id') 
     $(".content").fadeOut(100); 
     $('.' + cls).delay(100).fadeIn(400); 
     return false; 
    }); 


jQuery("h2").fitText(); 

jsFiddle

Answer 1

這裏的解釋：當你。內容{顯示：無;}。因爲元素被隱藏，所以fitText不能應用js onload。可能有解決方法，但我不確定在這一點上。 :)

Answer 2

有H2 {字體大小：0} ...得到從某處添加。

這裏是你可以做什麼：

.content { 
    background: red; 
    height: 100px; 
    margin: 10px; 
    font-size:60px; 
    width: 84%; 
    max-width:500px; 
} 

http://jsfiddle.net/g76G9/4/

Answer 3

我創建了一個小提琴，它使用不透明度而不是顯示器：沒有與現在具有相同的效果，但fitText工作正常！

http://jsfiddle.net/g76G9/16/

<a id="one" href="#">one</a> 
<a id="two" href="#">two</a> 
<a id="three" href="#">three</a> 

<div class="container"> 
    <div class="one content"> 
     <h2>one</h2> 
    </div> 
    <div class="two content"> 
     <h2>two</h2> 
    </div> 
    <div class="three content"> 
     <h2>three</h2> 
    </div> 
</div> 

.content { 
    background: red; 
    width: 500px; 
    height: 100px; 
    position:absolute; 
    top:0; 
    left:0; 
    transition: opacity 0.4s ease 0s; 
} 
.container{ 
    margin: 10px; 
    width:500px; 
    height:100px; 
    position:relative; 
} 
.content { 
    opacity:0; 
} 
h2 { 
    font-size: 60px; 
    height: 100%; 
} 

$("a").click(function() { 
     var cls = $(this).attr('id') 
     $(".content").css('opacity', '0'); 
     $('.' + cls).css('opacity', '1'); 

     return false; 
    }); 


    jQuery("h2").fitText();