Question

我正在使用fittext.js来使文本响应，并且我有3个div，当单击相应的链接时，这些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

有h2 {font-size：0} ...从某个地方添加。

以下是您可以做的事情：

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

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

Answer 3

我创建了一个使用不透明度而不是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();

使用fittext.js和jquery fadeIn，响应文本无法正常工作

3 个答案: