an element disappears but does not appear again. Why? fadeOut () fadeIn ()

0

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)

    
asked by facundo rotger 04.03.2018 в 15:39
source

2 answers

1

Code resuleto:

$('document').ready(function(){

  $('#botonFrases').click(function(){
    var arrayFrase = ['uno', 'dos'];
    var i = Math.floor(Math.random() * (arrayFrase.length));
      $("#log").html("Posiciòn: " + i);
      $('#frases').fadeOut("slow", function(){
        $('#frases').html('<p>'+'"'+arrayFrase[i]+'"'+'</p>').fadeIn("slow");
    });
    $('#autor').fadeOut("slow", function(){
      $('#autor').html('<p>'+arrayFrase[i]+'</p>').fadeIn("slow");
    });
  }); 

});

HTML:

<button id="botonFrases">Frases</button>
<div id="frases">Inicio</div>
<div id="autor">Inicio</div>
<div id="log"></div>

Note: The div "log" was added only for the purpose of debugging the solution.

    
answered by 05.03.2018 / 16:28
source
0

Friend, your code is incomplete and has some things of more ... I do not know if it is what you are looking for but in this link the code is arranged and also functional.

link

    
answered by 05.03.2018 в 01:43