如果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 -->
评论
  • 陌生到认识
    陌生到认识 回复

    一种简单的解决方案是仅添加第二个参数进行延迟。但是,您也可以通过CSS动画轻松实现它。

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