Andre FIlipe Andre FIlipe - 6 months ago 8
Javascript Question

Why JQuery doesn't show a div

I'm having trouble with fading in another

div
, the ID id has 0 opacity, so the fadein effect should do the trick

//Opening
setTimeout(function() {
$('#open').fadeOut('slow');
}, 9000); // <-- time in milliseconds

setTimeout(function() {
$('#switch').fadeIn('slow');
}, 9000); // <-- time in milliseconds


the fade out works, but the fade in doesn't; The
#open
is the id of one div, with opacity of 1, the
#switch
ID is another DIV which includes most of the content I got, which doesn't show.

What am I doing wrong?

Answer

You cannot fadeIn something that is already into view (well you can, but you will not see any difference). You need to start with the element hidden.

To illustrate this, I added the display:none on one of the elements (to bring it into view after the timeout)

//Opening
setTimeout(function() {
  $('#open').fadeOut('slow');
}, 3000); // <-- time in milliseconds

setTimeout(function() {
  $('#switch').fadeIn('slow');
}, 3000); // <-- time in milliseconds
#switch {
  background-color: #333;
  display: none;
  color: white;
}
#open {
  background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="open">
  OPEN

</div>
<div id="switch">
  Switch
</div>

Comments