我有这个textillate选项集，已经在网络上尝试了一些例子，但没有动画正在运行，我认为是正确的。目标是创建一个按钮，其中第一个文本元素随机地逐个字母淡出，第二个文本也随机地淡出，这就是我所尝试的:
var textilateoptions = {
autoStart: true,
// in animation settings
in: {
// set the effect name
effect: 'fadeInUp',
// set the delay factor applied to each consecutive character
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// out animation settings.
out: {
effect: 'fadeOutUp',
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// set the type of token to animate (available types: 'char' and 'word')
type: 'char'
};
$('.btneffect .infobtn').textillate(textilateoptions);
textilateoptions.autoStart = false;
$('.btneffect .infobtn2').textillate(textilateoptions);
$('.btneffect').hover(function(){
$(this).find(".infobtn").textillate('out');
$(this).find(".infobtn2").textillate('in');
},function(){
$(this).find(".infobtn").textillate('in');
$(this).find(".infobtn2").textillate('out');
});
这里的代码示例
此处正确
// set to true to animate all the characters at the same time
sync: false,
和animation .css的版本
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
改变用3.7.2代替4.1.1
和
sync: true
sync: false
make it works
https://codepen.io/prajin-tst/pen/rNzYzwG
Textillate的github页面列出了一些依赖项，如lettering.js和animate.css。您可能会丢失animation .css文件，因为当我将<link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />行添加到Codepen时，我可以让文本在鼠标上方移动。在我用Codepen的CSS, Javascript和HTML创建的测试HTML页面(如下所示)中观察到类似的情况。
<!DOCTYPE html>
<html>
<head>
<link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />
<style>
.infobtn {
width: 100%;
height: 100%;
position: relative;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
color: #f00;
}
.btneffect .infobtn2 {
position: absolute;
bottom: 0;
color: #000;
}
.btneffect {
border-bottom: 1px solid #f00;
}
</style>
</head>
<body>
<div class="btneffect corpri1 letra14 bold">
<div class="infobtn animate corpri1">Todos os produtos</div>
<div class="infobtn2 animate preto">Todos os produtos</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<script src="http://textillate.js.org/jquery.textillate.js"></script>
<script>
$(function () {
var textilateoptions = {
autoStart: true,
// in animation settings
in: {
// set the effect name
effect: "fadeInUp",
// set the delay factor applied to each consecutive character
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// out animation settings.
out: {
effect: "fadeOutUp",
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// set the type of token to animate (available types: 'char' and 'word')
type: "char",
};
$(".btneffect .infobtn").textillate(textilateoptions);
textilateoptions.autoStart = false;
$(".btneffect .infobtn2").textillate(textilateoptions);
$(".btneffect").hover(
function () {
$(this).find(".infobtn").textillate("out");
$(this).find(".infobtn2").textillate("in");
},
function () {
$(this).find(".infobtn").textillate("in");
$(this).find(".infobtn2").textillate("out");
}
);
});
</script>
</body>
</html>
我已经做了我自己的插件，无论如何，谢谢