我已经设置了textillate选项,尝试了网上的一些示例,但没有动画运行,我认为这是正确的。 目标是创建一个按钮,其中第一个文本元素以随机字母顺序fadeOutUp,第二个文本以随机字母顺序fadeInUp,这是我尝试过的:
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');
});
这是Codepen示例,请在此处查看
3.7.2
版本的动画库,而不是4.1.1
版本。 - PRAJIN PRAKASH