jQuery FadeOut（）和FadeIn（）函数不起作用

Question

I wanna make a floating text on a page, changing between the quotes on the quotes array. 我想在页面上制作一个浮动文本，在引号数组之间的引号之间进行更改。 And adding some effect during this change. 并在此更改期间添加一些效果。

I have this Html code: 我有此HTML代码：

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

And this JavaScript code: 这段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>

The quotes are changing. 报价在变化。 But it's not showing the fade effect when the quotes are changing. 但是，当报价更改时，它没有显示淡入淡出效果。 Someone can help? 有人可以帮忙吗？

Answer 1

First, wrap your function in a $(document).ready() function to ensure that the DOM is loaded before running your code. 首先，将您的函数包装在$(document).ready()函数中，以确保在运行代码之前已加载DOM。

Second, change your setInterval to a setTimeout . 其次，将setInterval更改为setTimeout 。 This makes the code wait until the previous function is complete before running it again. 这使代码等待上一个功能完成，然后再次运行。 This should give you the results that you are wanting. 这应该给您想要的结果。 See the snippet below. 请参见下面的代码段。

 $(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(); });

 <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>

jQuery FadeOut（）和FadeIn（）函数不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-28 13:32:36

jQuery FadeOut（）和FadeIn（）函数不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-28 13:32:36

解决方案1
1 已采纳 2015-01-28 13:32:36