Question

好吧，我正在尝试制作一个使用随机入口和出口循环通过术语的页面（由animate.css提供支持）。我认为我的逻辑很简单，理论上也应该有效。然而，当页面加载它们是一个很长的延迟然后只是单词＆＃34; term 1＆＃34;使用随机入口但不退出。

这是我的代码：

[HTML]

<div id="rotate"></div>

[JS]

var terms = ["term 1", "term 2", "term 3", "term 4"];
var entrances = ["animated bounceInLeft", "animated fadeInLeft", "rotateInDownLeft", "rotateInUpLeft",
    "slideInLeft", "zoomInLeft", "rollIn"];
var exits = ["animated bounceOutRight", "animated fadeOutRight", "rotateOutDownRight", "rotateOutUpRight",
    "slideOutRight", "zoomOutRight", "rollOut"];
var count = 0;

    function rotateTerm() {
        if (terms[count] < terms.length) {
            wordGen(terms[count]);
        }
        else {
            count = 0;
            wordGen(terms[count])
        }
        count += 1;
        rotateTerm();
    }

    function wordGen(t) {
        $("#rotate").text(t).addClass(entrances[Math.floor((Math.random() * entrances.length))])
                // the following code waits for the animation from 
                // the entrance to end then performs the function()
                .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
                 function () {
                    $("#rotate").text(t).addClass(exits[Math.floor((Math.random() * exits.length))])
                })
    }
window.onload = rotateTerm();

对我做错的任何帮助？还是更好的方法？或者任何一般的东西！

使用Animate.css改组文本循环

0 个答案: