如何连续不断地重复文本动画

时间:2012-05-31 04:52:37

标签: jquery html

我正在使用下面的代码一次又一次地为文本设置动画,但下面的代码以我在下面的代码中提到的10个案例结束,但我要求文本一次又一次地动画。

<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery TextFX - A jQuery Text Animation Engine</title>
    <style type="text/css">
    body{margin:0;padding:0;color:#333}#effectTwo{display:none}
    </style>
    <link rel="stylesheet" type="text/css" href="cj-text-fx.min.css" />
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">jQuery.noConflict();</script>
    <script src="jquery.easing.1.3.min.js" type="text/javascript"></script>
    <script src="cj-text-fx.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var isOn = 0,
sets, fx, toAnimate = "#effect",
settings = {
    animation: 8,
    animationType: "in",
    backwards: !1,
    easing: "easeOutQuint",
    speed: 1E3,
    sequenceDelay: 100,
    startDelay: 0,
    offsetX: 100,
    offsetY: 50,
    onComplete: fireThis,
    restoreHTML: !0
};
jQuery(document).ready(function () {
    fx = jQuery("#effect");
    jQuery.cjTextFx(settings);
    jQuery.cjTextFx.animate(toAnimate)
});

function fireThis() {
    if (isOn !== 13) {
        isOn < 13 ? isOn++ : isOn = 0;
        switch (isOn) {
        case 1:
            sets = {
                animationType: "out",
                restoreHTML: !1
            };
            break;
        case 2:
            fx.html("Systematic Approch for Innovation");
            sets = {
                animation: 11
            };
            break;
        case 3:
            sets = {
                animation: 11,
                animationType: "out",
                restoreHTML: !1
            };
            break;
        case 4:
            fx.html("Systematic Approch for Innovation");
            sets = {
                animation: 1
            };
            break;
        case 5:
            sets = {
                animation: 1,
                animationType: "out",
                restoreHTML: !1
            };
            break;
        case 6:
            fx.html("Systematic Approch for Innovation");
            sets = {
                animation: 6,
                backwards: !0
            };
            break;
        case 7:
            sets = {
                animation: 4,
                animationType: "out",
                backwards: !0,
                restoreHTML: !1
            };
            break;
        case 8:
            fx.html("Systematic Approch for Innovation");
            sets = {
                animation: 2,
                easing: "easeOutBounce"
            };
            break;
        case 9:
            sets = {
                animation: 2,
                animationType: "out",
                speed: 500,
                easing: "easeInBack",
                restoreHTML: !1
            };
            break;
        case 10:
            fx.html("Systematic Approch for Innovation"), sets = {
                animation: 14,
                startDelay: 1E3,
                linked: !0,
                hyperlink: "generator.html",
                color: "#0000FF",
                linkTarget: "_self",
                onComplete: null
            }
        }
        jQuery.cjTextFx.animate(toAnimate, sets)
    }
};

    </script>
    </head>
    <body>
    <div id="container">
    <div id="text-fx">
    <div id="effect">Systematic Approch for Innovation</div>
    </div>
    </div>
    </body>
    </html>

请告诉我解决问题的方法。迫在眉睫。提前致谢。

1 个答案:

答案 0 :(得分:0)

变化:

 if (isOn !== 13) {
 isOn < 13 ? isOn++ : isOn = 0;

 case 10:
        fx.html("Systematic Approch for Innovation"), sets = {
            animation: 14,
            startDelay: 1E3,
            linked: !0,
            hyperlink: "generator.html",
            color: "#0000FF",
            linkTarget: "_self",
            onComplete: null
        }
    }
    jQuery.cjTextFx.animate(toAnimate, sets)

要:

    isOn !== 11 ? isOn++ : isOn = 0;

 case 10:
        fx.html("Systematic Approch for Innovation"), sets = {
            animation: 14,
            startDelay: 1E3,
            linked: !0,
            hyperlink: "generator.html",
            color: "#0000FF",
            linkTarget: "_self",
            onComplete: function(){
                 jQuery.cjTextFx.animate(toAnimate, sets)
            }
        }
    }