jquery - 响应式文本不适用于 fittext.js 和 jquery fadeIn

Question

我正在使用fittext.js使文本响应，并且我有 3 个 div 在单击相应链接时变得可见。div 包含 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

解释如下：当你有 .content {display: none;}。fitText 无法应用 js onload，因为该元素是隐藏的。可能有一个解决方法，但我现在不确定。:)

Answer 2

我创建了一个使用 opacity 而不是 display:none 的小提琴，它的效果与现在相同，但 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();

Answer 3

有 h2{font-size:0}... 从某处添加。

以下是您可以执行的操作：

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

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