I have a text that when I click on a button I want it to disappear, replace it with another one and reappear, for that I use the fadeOut and fadeIn functions of jQuery. The problem is that clicking on the button sometimes works correctly but in others the text just disappears and does not appear again. Why is this happening and how can I fix it?
code:
$('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");
});
});
});
(each arrayFrase element is another array whose elements are the phrase and the author)