我正在使用在线演示中的代码来启动并运行该库,但即使如此,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 脚本,但没有效果。
感谢您提前的投入和关注:-)
最佳答案
查看了您的源代码,我意识到您在加载 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
});
});
请记住在使用库和依赖项之前始终加载它们。
关于javascript - 根本无法让 Textillate.js 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32785371/