jQuery Textillate参数配置未生效，hover字母随机淡入淡出动画无法运行如何解决

问题修复方案 #

• 核心错误点是配置中的sync: true参数：该参数设置为true时所有字符会同步执行动画，和你需要的「逐个随机出现/消失」效果冲突，修改为sync: false即可。
• 需补充初始状态处理：默认需要将第二个文本元素.infobtn2隐藏，否则页面加载时两个文本会同时显示，不符合交互预期。
• 优化配置引用问题：你直接修改同一个配置对象的属性属于引用赋值，建议拆分两个独立配置避免潜在的属性污染问题。
• 原配置delayScale数值20过大，会导致字符动画的间隔过长，可调整为1~2之间的数值匹配常规交互节奏。

var textilateoptionsBase = {
    // 入场动画配置
    in: {
        effect: 'fadeInUp',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: true,
        reverse: false,
    },
    // 退场动画配置
    out: {
        effect: 'fadeOutUp',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: true,
        reverse: false,
    },
    type: 'char'
};

// 第一个文本初始自动播放入场动画，默认显示
$('.btneffect .infobtn').textillate({
    ...textilateoptionsBase,
    autoStart: true
});
// 第二个文本初始化后先播退场动画隐藏
const $infoBtn2 = $('.btneffect .infobtn2').textillate({
    ...textilateoptionsBase,
    autoStart: false
});
$infoBtn2.textillate('out');

// 绑定hover交互
$('.btneffect').hover(function(){
    $(this).find(".infobtn").textillate('out');
    $(this).find(".infobtn2").textillate('in');
},function(){
    $(this).find(".infobtn").textillate('in');
    $(this).find(".infobtn2").textillate('out');
});

内容的提问来源于stack exchange，提问作者Miguel Machado