jQuery Textillate 选项未产生预期结果

Question

我设置了这个 textillate 选项，已经在网上尝试了一些示例，但没有动画运行，我认为是正确的。 objective 是创建一个按钮，其中第一个文本元素逐个字母随机淡入淡出，第二个文本也随机淡入淡出，这就是我尝试过的方法：

        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 示例 here

Answer 1

Textillate 的 github page 列出了一些依赖项，例如 lettering.js 和 animate.css。您可能会丢失 animate.css 文件，因为当我将行 <link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" /> 添加到您的 Codepen 时，我可以让文本在鼠标悬停时向上移动。在我用你的 CSS、Javascript 和 HTML 从 Codepen 创建的测试 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>

Answer 2

此处更正

 // set to true to animate all the characters at the same time
    sync: false,

和 animate.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

让它发挥作用

https://codepen.io/prajin-tst/pen/rNzYzwG

Answer 3

我已经制作了自己的插件，无论如何谢谢

jQuery Textillate 选项未产生预期结果

jQuery Textillate options not creating the expected result

javascript

jquery

hover

jquery-textillate