0

我正在创建一个 html 页面。我需要的是，在一个位置设置动画的文本，它必须在其他位置固定。这是我的代码

HTML：

<body>
<div id="text">Sample Text</div>
<script type="text/javascript">
    $(document).ready(function() {

        var textFxSettings = {
            animation: 3,
            color: "#111",
            animationType: "in",
            speed: 1000
        };

        jQuery.cjTextFx(textFxSettings); // INIT FUNCTION
        jQuery.cjTextFx.animate("#text", {
            onComplete: myFunction
        });

    });
</body>

CSS：

#text{
position:absolute;
top:230px;
left:530px;
font-size:24px;
}

.text_pos{

animation:spin 3s;
-moz-animation:spin 3s; /* Firefox */
-webkit-animation:spin 3s; /* Safari and Chrome */
-o-animation:spin 3s; /* Opera */
}

@-webkit-keyframes spin{
    0%   {   -webkit-transform: translate(0px, 0px); }
    100% {   -webkit-transform: translate(0px, -150px); }   
}

此平移将转到正确的位置，但在 1 个循环后它会回到其原始位置（顶部：230）。我希望文本位于顶部：80。我尝试通过更改 text_pos 类的位置，但它不起作用。任何人都可以在这方面帮助我。提前致谢。

4

2 回答 2

0

您可以使用将位置更改为 div 之类的

  $("#text").css({"top":"10px","left":"20px"});
于 2013-04-16T11:57:54.183 回答
0

将脚本放在 $(document).ready(function()) 中的 ajax.stop 函数中，例如

 $(document).ajaxStop(function () {
  var textFxSettings = {
        animation: 3,
        color: "#111",
        animationType: "in",
        speed: 1000
    };

    jQuery.cjTextFx(textFxSettings); // INIT FUNCTION
    jQuery.cjTextFx.animate("#text", {
        onComplete: myFunction
    });
 }
于 2013-04-16T11:58:41.023 回答