jQuery textillate.js，在动画之前隐藏文本。解决方案不起作用

Question

我正在使用插件 jQuery textillate.js ( https://github.com/jschr/textillate ) 来为一些文本添加动画效果。进展顺利，但文本在动画之前可见。我尝试了在 How do i hide content before calling a jquery text effect plugin? 找到的解决方案

但似乎不起作用。

CSS:

.hide-text {
visibility:hidden;}

JS:

$(function () {
$('.hide-text').textillate({
    selector: '.texts',
    loop: false,
    initialDelay: 3000,
        in: {
            effect: 'fadeInDown',
            sync: true,
        },
    autoStart: true,
});

HTML

<h1 class="hide-text texts">Lorem ipsum dolor sit amet</h1>

Answer 1

您的(稍加修改的)代码似乎可以工作:

http://jsfiddle.net/jschr/7KJkM/

.hide-text {
 visibility:hidden;
}

$('.texts').textillate({
    loop: false,
    initialDelay: 3000,
    in: {
        effect: 'fadeInDown',
        sync: true,
    }
});

一定还有其他原因导致文本不被隐藏。是否有另一个 css 规则覆盖了 hide-text 规则？