Javascript random text fade out/in

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, вы можете легко достичь этого с помощью собственных fadeIn() и fadeOut() функции JQuery в.

Например, код может быть обновлен следующим образом:

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

Try

fiddle Demo

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