单击淡入元素然后显示另一个元素

fadeIn element on click and then show another element

我想在单击时淡入元素 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 使用一个事件处理程序,并根据此 hide/show 您的其他元素检查其可见与否。

演示代码 :

$("#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();
});