Question

我想知道是否有其他人在使用textillate函数时遇到问题，在javascript控制台中出现此错误。

我检查了我的源代码，我的文件链接正确，我使用其他网站的演示但我仍然遇到此错误

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.vusive.com/v2/plugins/textillate/jquery.lettering.js"></script>
<link href="https://www.vusive.com/v2/plugins/textillate/animate.css" rel="stylesheet"/>

<div class="demo">
    <p>Each of this letter will animate.</p>
</div>

＆＃13;

如果你进入全屏模式测试代码然后打开开发者控制台，你会看到同样的错误

Answer 1

您未包含textillate JavaScript文件

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.vusive.com/v2/plugins/textillate/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>

<link href="https://www.vusive.com/v2/plugins/textillate/animate.css" rel="stylesheet"/>

<div class="demo">
    <p>Each of this letter will animate.</p>
</div>

Answer 2

您没有包含jquery.textillate.js文件。请在包含jquery.lettering.js文件后添加类似的内容，

<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>

Answer 3

我不知道您是否有错误的文件或错误的插件名称。

您可以轻松地在浏览器中打开文件jquery.lettering.js的网址。

包含的插件功能是：$.fn.lettering而不是$.fn.textillate，因为您正在使用

Answer 4

我刚检查了插件，似乎textillate不是jQuery函数。但是lettering。

也许试试

$('.tlt').lettering({ ... })

插件中的函数

$.fn.lettering = function( method ) { ... });

未捕获的类型错误$（...）textillate不是一个函数

4 个答案: