Javascript 响应文本--函数未使用FitText和FlexSlider初始化

我有一个使用FlexSlider的响应滑块。 我还希望每个滑块下的文本调整大小。除了第一张幻灯片，或者如果我调整窗口大小，FitText不会在任何幻灯片上初始化。 我怎样才能做到这一点（没有FOUC）？ 应该在IE8上工作，加上现代浏览器

HTML

    <div class="flexslider">
      <ul class="slides">
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/animals/" alt="" />
              <figcaption>
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/sports/" alt="" />
              <figcaption>
                <h1>uis nostrud exercitation ullamco </h1>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/people/" alt="" />
              <figcaption>
                <h1>ncididunt ut labore et dolore magna aliqua.</h1>
                <p>abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
      </ul>
    </div>​

JS

$('.flexslider').flexslider();

$(".slides h1, .slides p").fitText();  ​

---

希望这会有帮助

路线图：

阅读关于css插件技巧的简短说明

以Paul Irish的跨浏览器实现修复不同浏览器中的

resize

事件为例

仅在此处将字体大小从

px

切换到

em

（或任何其他相对值，如%）：

...
h1 {
    font-size: .5em;
    width: 100%;
}
p {
   font-size: .2em;
   width: 100%;
}
...

对fit文本的调用方式进行了位修改

$(".slides").fitText();

这基本上将更新父级元素上的字体大小，这将对基于

em

的子级字体产生影响，这就是整个想法

每次使用Paul的代码片段调整窗口大小时，也调用fit文本

就是这样，代码很粗糙，需要清理和浏览，但效果很好

UPD：来自github fitText源代码的代码在IE中被不匹配的mime类型阻止，这导致了问题。 作为替代解决方案，您可以只在js文件中包含正确类型的源代码，这样就可以了

---

旧的IE不工作示例在这里留待记录，上面的新示例使用IE调试工具栏测试到了7个版本，当然它与真正的浏览器不一样，但到目前为止还不错。

Flexslider的CSS隐藏了所有

li

元素，然后由

Flexslider（）

显示，因此，无法计算

fitText（）

所针对的文本，除非它位于最初可见的第一张幻灯片中。我尝试通过在Flexslider之前运行以下命令来解决此问题：

var slider = $('.flexslider'),
    hiddenSlides = slider.find('.slides > li:not(".slides > li.flex-active-slide")'),
    text = hiddenSlide.find('.text');

hiddenSlide.show();

text.fitText();

hiddenSlide.hide();

---

这解决了加载时的问题。我还尝试将其包装到函数中，并在

resize

事件中调用它，但这对我来说不起作用。如果有人能填空，那就太好了。

没有，因为有一堆没有样式的内容。我所做的更改在JSFIDLE中起到了作用。实际上，slides hide属性隐藏了所有的p和h1，因此fitText无法向其添加更改。让我们试试这个-将整个代码放在-$（“.slides h1，.slides p”）.fitText（）之外；在一个函数中，调用函数之前刚刚确定，我不知道它是否会被你接受。。。但是试试这个技巧-让文本的颜色最初是白色（或背景色），在fittext上，将字体颜色改为黑色。请把你的想法整理一下。谢谢。这很好，但它在IE中不起作用。我真的需要它在IE 8-9中起作用，在IE7中降级。IE8不一定是完美的。SEC7112:由于mime类型不匹配，来自的脚本被阻止。2 SCRIPT438:对象不支持属性或方法“fitText”。这是IE的问题所在，它阻止了GitubKudos中的fitText，用于

em

单元实现和jQuery中的

目标。令人惊叹的！
$(".slides").fitText();

var slider = $('.flexslider'),
    hiddenSlides = slider.find('.slides > li:not(".slides > li.flex-active-slide")'),
    text = hiddenSlide.find('.text');

hiddenSlide.show();

text.fitText();

hiddenSlide.hide();