javascript - 根本无法让 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 框架，我尝试禁用该框架以及 MaterializeCSS 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
    });
});

请记住在使用库和依赖项之前始终加载它们。