如果div可见/有效，如何创建切换延迟？

由 发布于

我正在寻找一种方法，如果另一个班级可见/活跃，则在班级上产生延迟

在此示例中，需要1秒来切换类的不透明度，因此，例如，如果正在显示“ .about__section”（具有类“ show”），我希望在“ .work__section”开始之前先使其淡出1（结束动画）。淡入。

我只希望这种延迟发生，即使其他班级中有一个班级“ show”

有什么建议么？

$(".about").on("click", function() {
    
    $(".about__section").toggleClass("show");
    
    $(".work__section").removeClass("show");

});
  
  
$(".work").on("click", function() {
    
    $(".work__section").toggleClass("show");
    
    $(".about__section").removeClass("show");

});
.about, .work {
cursor: pointer;
}

.about__section, .work__section {
  opacity: 0;
  transition: opacity 1s ease-in;
  width: 400px;
  position: absolute;
  top: 4rem;
}

.about__section.show, .work__section.show {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul class="content">

  <li class="about">About</li>

  <li class="work">Work</li>

</ul>






<div class="about__section">



    <p>About:<br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
                
</div><!-- End of About Section -->


<div class="work__section">



    <p>work:<br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
                
</div><!-- End of About Section -->