无法让Textillate.js工作

Question

我正在使用在线演示中的代码来启动和运行库，但即使这样，textilate.js也无法运行。我多次检查了我能想到的一切。

不工作我的意思是文字没有动画效果。

在错误控制台中，它指出：“ReferenceError：找不到变量：$”。

实际网址为：www.econengines.com。

这是代码（包括依赖项）：

<link rel="stylesheet" href="animate.min.css">

<div class="tlt">
    <p>Each of these letters will animate.</p>
</div>

<script>

$(document).ready(function(){
        $('.tlt').textillate({ in : {
                shuffle: false,
                sync: true
            },
            out: {
                effect: 'fadeOutRightBig',
                shuffle: false,
                sync: true
            },
            loop: true
        });
    });

</script>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="lettering.min.js"></script>
<script type="text/javascript" src="textillate.js"></script>

FTP文件的快照：

我正在使用名为MaterializeCSS的Web框架，我尝试禁用它以及MaterialiseCSS js脚本，但它没有效果。

我提前感谢您的投入和关注： - ）

Answer 1

看了一下你的源代码，我意识到在加载JS库之前你正在调用$(document).ready()函数。

你需要移动这个

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="materialize.min.js"></script>
<script type="text/javascript" src="lettering.min.js"></script>
<script type="text/javascript" src="textillate.js"></script>  

并将其放在这个

$(document).ready(function(){
    $('.tlt').textillate({ 
        in : {
            shuffle: false,
            sync: true
        },
        out: {
            effect: 'fadeOutRightBig',
            shuffle: false,
            sync: true
        },
        loop: true
    });
});

记住在使用它们之前总是加载库和依赖项。