点击时淡入元素，然后显示另一个元素

如何解决点击时淡入元素，然后显示另一个元素

我想在单击时淡入元素 A，然后显示另一个元素 B，因为元素 A 是可见的。不幸的是，我的代码不起作用，有人可以帮助我吗？

https://jsfiddle.net/jxma8zfu/17/

$("#toggle").on("click",function () {
    $("#hallo").fadeIn();
});
$("#toggle").on("click",function () {
    $("#hallo").fadeOut();
});



$(function() {
    if($("#hallo").is(":visible")) {
        $("#cursor").fadeIn(1000); 
    }
});

解决方法

您只能为 toggle div 使用一个事件处理程序，并根据此隐藏/显示您的其他元素检查其可见与否。

演示代码：

$("#toggle").on("click",function() {
  //check if hallo is visible means we need to hide..(toggle) 
  if ($("#hallo").is(":visible")) {
    $("#hallo").fadeOut();
    $("#cursor").fadeOut(1000);
  } else {
    //show...
    $("#hallo").fadeIn();
    $("#cursor").fadeIn(3000);
  }
});

#toggle {
  position: fixed;
  top: 20px;
  left: 20px;
}

#hallo {
  display: none;
  position: absolute;
  top: 80px;
  left: 20px;
  width: 200px;
}

#cursor {
  display: none;
  position: fixed;
  top: 150px;
  left: 150px;
  background: yellow;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 999999 !important;
  font-size: 2.0em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="toggle">
  toggle
</p>

<p id="hallo">
  Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,sed diam voluptua.
</p>

<div id="cursor">
  Lorem ipsum
</div>

,

一旦用户点击视口中的某处，是否还有机会关闭#hello？我尝试了以下代码，但它不起作用。

$(window).on("click",function () {
    $("#hello").fadeOut();
});