我有一些文本每 3 秒随机变化一次,它的工作方式就像一个魅力,但我想在它变化时进行淡出、淡入过渡。这是我的脚本/
<script type="text/javascript">
var textarray = [
"& prisioner 24601.",
"& occasional timelord.",
"& part-time Pokémon trainer.",
"& guilty for the zombie apocalypse.",
"& potential book worm." // No comma after last entry
];
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('random_text').innerHTML=textarray[rannum];
}
onload = function() { RndText(); }
var inter = setInterval(function() { RndText(); }, 3000);
这是它应用到的 html 部分:
<span id="random_text">& occasional time lord</span>
有什么想法可以实现这一点吗? 谢谢
最佳答案
由于您已使用 jquery
标记了这篇文章,因此您可以使用 jQuery 自己的 fadeIn()
轻松实现此目的。和 fadeOut()
功能。
例如,您的代码可以更新如下:
var textarray = [
"& prisioner 24601.",
"& occasional timelord.",
"& part-time Pokémon trainer.",
"& guilty for the zombie apocalypse.",
"& potential book worm."
];
function RndText()
{
var rannum = Math.floor(Math.random() * textarray.length);
$('#random_text').fadeOut('fast', function() {
$(this).text(textarray[rannum]).fadeIn('fast');
});
}
$(function() {
// Call the random function when the DOM is ready:
RndText();
});
var inter = setInterval(function() { RndText(); }, 3000);
我还对您的代码做了一些细微的更改(例如将 window.onload
更改为 $(document).ready()
)。
关于Javascript随机文本淡出/淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20312220/