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

Question

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

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



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

Answer 1

您只能为 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>

Answer 2

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

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

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

fadeIn element on click and then show another element

jquery

fadein

visible