1

你好，

我试图让一个字符串逐个字符地出现和消失。首先，我使用 lettering.js 将字符串拆分为与字符串长度一样多的 span 元素。其次，我使用速度对它们施加一些影响。

所以例如

<div id="demo1" class="demo">
    <h1>Rainbow</h1>
</div>

<script>
        $(document).ready(function() {

            $("#demo1 h1").lettering();

            $(".char1").velocity("transition.whirlIn", 1000);
            $(".char1").velocity({translateX: "201px"});
            $(".char1").velocity({translateY: "20px"});
            $(".char1").velocity({opacity: "0"});   

            $(".char2").velocity("transition.whirlIn", 2000);
            $(".char2").velocity({translateX: "201px"});
            $(".char2").velocity({translateY: "20px"});
            $(".char2").velocity({opacity: "0"});

        });
</script>

它运作良好，我的第一个角色移动并消失了 yiha！但是没有办法循环所有这些。如果您查看速度文档，对某物施加多种效果的唯一方法是调用尽可能多的 .velocity 来添加效果...存在循环属性，但您不能将所有速度调用都放入一排。

有谁知道我如何用速度做到这一点？我实际上不想使用动画。

谢谢你的帮助！

托马斯

4

1 回答 1

1

好的，我刚刚找到了解决方案

$("#demo1 h1").lettering('words').children('span').lettering().find('span').velocity({opacity: 0}, 0);

        var titles = ['First title', 'Second title', 'Third title'];
        var titleIndex = 0;

        var transitionsIn = ["flipXIn","slideDownIn","perspectiveLeftIn"];
        var transitionsOut = ["flipXOut","slideUpOut","perspectiveRightOut"];

        function animateText() {
            var transIn = transitionsIn[Math.floor(Math.random()*transitionsIn.length)];;
            var transOut = transitionsOut[Math.floor(Math.random()*transitionsOut.length)];;
            $('#demo1 h1 span span')
                    .velocity("transition." + transIn, {stagger: 100})
                    .delay(2000)
                    .velocity("transition." + transOut, {
                        complete: function(elements) {
                            console.log(elements);
                            titleIndex++;
                            if (titleIndex > titles.length) {
                                titleIndex = 0;
                            }
                            $("#demo1 h1").hide().html(titles[titleIndex]).lettering('words').children('span').lettering().find('span').velocity({opacity: 0}, {
                                complete: function(els) {
                                    $("#demo1 h1").show();
                                    animateText();
                                }});

                        }
                    })
                    ;
        }
        animateText();

希望它会有所帮助！

于 2014-07-30T13:40:22.163 回答