Question

我想在页面上制作浮动文本，在引号数组上的引号之间切换。并在此更改期间添加一些效果。

我有这个Html代码：

<body onLoad="frase1();">
    <h1 id="textslide" class="frase-topo"></h1>
</body>

这个JavaScript代码：

<script>
    var quotes = [
        "Aqui vai uma frase bem bonita",
        "E aqui também vai uma frase bem bonita"
    ];
    var i = 0;

    setInterval(function () {

        $('#textslide').fadeOut('slow', function () {
            $('#textslide').html(quotes[i]);
            $('#textslide').fadeIn('slow');
        });

        if (i === quotes.length) {
            i = 0;
        }
        else {
            i++;
        }
    }, 4000);

</script>

报价正在变化。但是，当报价发生变化时，它并未显示淡入淡出效应。有人可以帮忙吗？

Answer 1

首先，将您的函数包装在$(document).ready()函数中，以确保在运行代码之前加载DOM。

其次，将您的setInterval更改为setTimeout。这使代码等到上一个函数完成后再运行它。这应该会给你想要的结果。请参阅下面的代码段。

＆＃13;

$(document).ready(function () {
    var quotes = [
        "Aqui vai uma frase bem bonita",
        "E aqui também vai uma frase bem bonita"
    ];
    var i = 0;
    var timeOut = function () {
        $('#textslide').fadeOut('slow', function () {
            $('#textslide').html(quotes[i]);
            $('#textslide').fadeIn('slow');
            if (i === quotes.length) {
                i = 0;
            }
            else {
                i++;
            }
            window.setTimeout(function () { timeOut(); }, 4000);
        });
    };
    timeOut();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <h1 id="textslide" class="frase-topo"></h1>
</body>

＆＃13;

JQuery fadeOut（）和fadeIn（）函数不起作用

1 个答案: