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，因为该元素是隐藏的。可能有解决方法，但我现在不确定。 :)