个人中心
gpt4 book ai didi

javascript - jQuery Textillate 选项未创建预期结果

转载 作者：行者123 更新时间：2023-12-04 13:24:10 25 4
gpt4 key购买 nike

我设置了这个 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');
        });
Codepen 示例 here

最佳答案

纺织github page列出一些依赖项，如 lettering.js和 animate.css .当我添加行 <link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" /> 时，您可能会丢失 animate.css 文件。给您的 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>

关于javascript - jQuery Textillate 选项未创建预期结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69665276/

25 4 0
文章推荐： c++ - 进程共享 pthread_cond_t 在 gcc 8.4 中不起作用，但在 gcc 4.8.5 中起作用
文章推荐： performance - Haskell:映射长度。组比显式递归慢得多吗？
文章推荐： elasticsearch - 同一字段的 Elasticsearch 多个过滤器值
文章推荐： python - 为 sklearn 的 SVC 使用自定义 rbf 核函数比内置方法快得多
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com