时间戳

首页 > 解决方案 > 淡出（）不工作。淡出后依然显示

javascript - 淡出（）不工作。淡出后依然显示

问题描述

我可以知道我在哪里做错了吗？我想要实现的是我想淡出/隐藏段落。当它淡出时，该段落再次出现。

$("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>

标签： javascriptjquery

解决方案

检查代码中使用淡入淡出的其他地方。当我在沙盒中测试时，它运行良好。段落消失但不再出现

推荐阅读