javascript - fadeOut() not working. It still display after fading out

Question

May I know where am I doing it wrong? What I wanted to achieve is that I wanted to fadeOut/hide the paragraph. When its fading out, the paragraph appears again.

$("div.spanner").addClass("show");
$("div.overlay").addClass("show");
$("p.three").addClass("show").fadeIn(1000).delay(1000).fadeOut(1000);

.one, .two, .three, .four{
  visibility: hidden;
  z-index: 1000;
  top: 0;
  left: 0;
}


.spanner{
  position:absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  width: 80%;
  display:block;
  text-align:center;
  color: #FFF;
  z-index: 1000;
  visibility: hidden;
  border-radius: 15px;
  transform: translate(200px,300px);
}

.overlay{
  position: fixed;
    width: 100%;
    height: 100%;
  background: rgba(0,0,0,0.5);
  visibility: hidden;
  z-index: 1000;
}

.show{
  visibility: visible;
}

.spanner, .overlay{
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.spanner.show, .overlay.show {
    opacity: 1
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay"></div>
                <div class="spanner">
                    <p class="three">Creating your database...</p>
                </div>

question from:https://stackoverflow.com/questions/66060246/fadeout-not-working-it-still-display-after-fading-out

Answer 1

Check other place in your code where you are use fadeIn. When i testing in sandbox it work whell. The paragraph disappear but not re-apprear