Textillate JS-JQuery 动画不是选中的(而且总是一样的)
Textillate JS-JQuery animation is not the selected one (and always the same)
我正在使用 textillate.js 向文本添加动画。我的 html 页面看起来像这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textillate</title>
<link rel="stylesheet" href="animate.min.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<div class="tlt">
Hello world
</div>
<script>
$('.tlt').textillate({ in: { effect: 'bounceInDown' } });
</script>
</body>
</html>
其中包含的脚本和 css 取自以下链接:
- https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js
- https://code.jquery.com/jquery-3.5.1.min.js
- https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js
- https://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css
问题是,无论我在 in
对象中设置为 effect
,结果始终是默认的 textillate 动画:字符从左到右一个接一个地出现,我可以控制字母出现的顺序(如设置shuffle: true
等),但不能控制动画类型
这几乎是 textillate 在他的 github 页面上提供的示例代码,所以我不知道问题出在哪里。
我认为问题与 animate.css 参考有关,我更改了它并且有效。希望对你有帮助。
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
我正在使用 textillate.js 向文本添加动画。我的 html 页面看起来像这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textillate</title>
<link rel="stylesheet" href="animate.min.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<div class="tlt">
Hello world
</div>
<script>
$('.tlt').textillate({ in: { effect: 'bounceInDown' } });
</script>
</body>
</html>
其中包含的脚本和 css 取自以下链接:
- https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js
- https://code.jquery.com/jquery-3.5.1.min.js
- https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js
- https://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css
问题是,无论我在 in
对象中设置为 effect
,结果始终是默认的 textillate 动画:字符从左到右一个接一个地出现,我可以控制字母出现的顺序(如设置shuffle: true
等),但不能控制动画类型
这几乎是 textillate 在他的 github 页面上提供的示例代码,所以我不知道问题出在哪里。
我认为问题与 animate.css 参考有关,我更改了它并且有效。希望对你有帮助。
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>