tengo un texto que al hacer click en un boton quiero que desaparezca, se reemplace por otro y vuelva a aparecer, para eso uso las funciones fadeOut y fadeIn de jQuery. El problema es que al hacer click en el boton en ocasiones funciona correctamente pero en otras el texto solo desaparece y no vuelve a aparecer. Por que sucede esto y como puedo arreglarlo?
codigo:
$('document').ready(function(){
$('#botonFrases').click(function(){
var i = Math.floor(Math.random() * (arrayFrase.length + 1));
$('#frases').fadeOut("slow", function(){
$('#frases').html('<p>'+'"'+arrayFrase[i][0]+'"'+'</p>').fadeIn("slow");
});
$('#autor').fadeOut("slow", function(){
$('#autor').html('<p>'+arrayFrase[i][1]+'</p>').fadeIn("slow");
});
});
});
(cada elemento de arrayFrase es otro array cuyos elementos son la frase y el autor)