Question

我有一些文字每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>

有关如何实现这一目标的任何想法？谢谢

Answer 1

由于您已使用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()）。

jsFiddle Demo

Answer 2

尝试

fiddle Demo

var $ryt = $('#random_text');
function RndText() {
    var rannum = Math.floor(Math.random() * textarray.length);
    $ryt.html(textarray[rannum]).hide().fadeIn('slow');
}

Javascript随机文本淡出/中

2 个答案: