JSFiddle - React, Tailwind, and code Playground

code projects: demonstrating jQuery fadeOut (and fadeIn)

by jonchius

HTML

<body>
  <div id="initial">now, you see me!</div>
  <div id="postfade" class="hidden">
    <p id="posttext" class="hidden">
      now, you "don't"!
    </p>
  </div>
</body>

CSS

* { 
  margin: 0 auto;
  text-align: center;
  font-family: "Consolas", monospace;
}

/* initial text */
#initial {
  font-size: 16pt;
}

/* square shape */
#postfade { 
  height: 200px;
  width: 200px;
  background: #000;
  color: #fff;
}

#posttext {
  font-size: 24pt;
}

.hidden {
  display: none;
}

JavaScript

/*
[boxyfade] @jonchius
// how to fade text out and fade a shape in
*/

// text to fade out
$('#initial').fadeOut(2000);

// shape to fade in
$('#postfade').fadeIn(4000, fadeBox);

// things that happen after the shape finishes fading in
function fadeBox() { 

	// text to show one second after shape appears
  $('#posttext').fadeIn(1000);
      
};