Question

我有一个HTMl文本正在动态更改。现在根据我的要求，我必须以动画形式显示它们，如褪色和一些动作，但我不知道这个.. 这是我的代码..

<script type="text/javascript">
        var v = {};
        v[0] = "Your Text<br/>Hello";
        v[1] = "Your Text2<br/>Hello2";
        v[2] = "Your Text3<br/>Hello3";

        var i = 0;

        window.setInterval(function () {
            $("#dynamicMessage").html(v[i]);
            if (i == 2) {
                i = 0;
            } else {
                i = i + 1;
            }

        }, 10000);
</script>

请看一下，让我知道如何在HTML中为我的文字内容添加动画效果。感谢..

Answer 1

您可以使用fadeOut()和fadeIn()

的组合

$("#dynamicMessage").fadeOut( "slow", function() {
    $("#dynamicMessage").html(v[i]).fadeIn('slow');
})

查看此演示 - http://jsfiddle.net/xw2j6hsp/1/

<强>更新

在@laruiss回答：

上看到这条评论

“如果还有其他方法可以显示从中弹出的文本左“

以为我会为你编写代码。只需添加一些动画。检查一下 - http://jsfiddle.net/m6bnq1ja/

Answer 2

没有动画内容更改。你可以做的是隐藏元素，改变它的内容，然后淡入它，如下所示。它可能看起来与用户相同。

$("#dynamicMessage").hide().html(v[i]).fadeIn();

或

 $("#dynamicMessage").fadeOut(500, function() {
    $(this).html(v[i]).fadeIn(500);
});

Answer 3

不要忘记clearTimeout（或clearInterval）

var v = [
        "Your Text<br/>Hello",
        "Your Text2<br/>Hello2",
        "Your Text3<br/>Hello3"
    ],
    i = 0,
    timeout = null,
    change = function (text) {
        var $dynamicMessage = $("#dynamicMessage")
            .fadeOut("slow", function() {
                $dynamicMessage.html(text).fadeIn();
            });
        if (i == 2) {
            i = 0;
        } else {
            i = i + 1;
        }
        timeout = window.setTimeout(function() {change(v[i]);}, 2000);
    }
change(v[i]);

$(window).unload(function() {window.clearTimeout(timeout); timeout = null;});

JSFiddle

Answer 4

 var v = {};
    v[0] = "Your Text<br/>Hello";
    v[1] = "Your Text2<br/>Hello2";
    v[2] = "Your Text3<br/>Hello3";

        var i = 0;
        window.setInterval(function () {
        $("#dynamicMessage").fadeToggle( "slow", function() {
            $("#dynamicMessage").html(v[i]).fadeToggle('slow');
        });
        if (i == 2) {
            i = 0;
        } else {
            i = i + 1;
        }

    }, 4000);

注意：你也可以使用“fadeOut”＆amp; “fadeIn”取代“fadeToggle”

如何使用jquery为HTML内容设置动画..

4 个答案: