logo标签列表

jQuery Textillate选项未产生预期结果。

javascriptjqueryhoverjquery-textillate
4

我已经设置了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个回答
1
好的，那个方法是逐个字母地显示，但我没有看到任何动画效果。 - Miguel Machado
你必须使用 3.7.2 版本的动画库，而不是 4.1.1 版本。 - PRAJIN PRAKASH
0

Textillate的Github页面列出了一些依赖项，如lettering.js和animate.css。您可能会缺少animate.css文件，因为当我在您的Codepen中添加了以下行<link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />时，我可以使文本在鼠标悬停时向上移动。我在下面包含的测试HTML页面中观察到了类似的情况，该页面使用了您从Codepen获取的CSS、Javascript和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>
翻译：已经有了 - PRAJIN PRAKASH
是的，我已经包含了那些文件，它们在示例中..正如你所看到的.. - Miguel Machado
@MiguelMachado，你的版本是错误的。请查看链接，它可以正常工作：https://codepen.io/prajin-tst/pen/rNzYzwG - PRAJIN PRAKASH
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接