gpt4 book ai didi

javascript - JQuery fadeOut() 和 fadeIn() 函数不起作用

转载 作者:行者123 更新时间:2023-12-03 10:58:03 25 4
gpt4 key购买 nike

我想在页面上制作 float 文本,在引号数组上的引号之间进行更改。并在此更改期间添加一些效果。

我有这个 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>

报价正在变化。但当报价发生变化时,它没有显示淡入淡出效果。有人可以帮忙吗?

最佳答案

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

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

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

关于javascript - JQuery fadeOut() 和 fadeIn() 函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28193327/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com