javascript - 使用 JS/jQuery 的闪烁通知/确认

Question

当我点击某个元素时，我希望看到一个确认 出现并淡出。我用下面的代码实现了这个，但我不是 100% 高兴，因为它不能连续快速使用两次。在再次单击之前，我需要等待文本消失(并在隐藏时重新出现)。一定有更好的方法来施展这种魔法。

这是我做的:

$(".hello").click(function() {
  var element = $(".conf");
  blink(element);
  setTimeout(function() {
    reset(element);
  }, 2000);
});

function blink(element, callback) {
  element.css('visibility', 'visible');
  element.css('opacity', '0');
}

function reset(element) {
  element.css('visibility', 'hidden');
  element.css('opacity', '1');
}

.hello {
  visibility: visible;
  transition: opacity 1s;
}

.conf {
  visibility: hidden;
  opacity: 1;
  border-radius: 5px;
  background-color: lime;
  color: black;
  transition: opacity 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="hello">hello</span>
<span class="conf">confirmation</span>

Answer 1

要解决此问题，您可以使用 display: none 隐藏该元素，然后在单击时 show() 它并立即淡出。如果您还在每个事件上调用 stop()，您将停止 fadeOut() 动画并将元素设置回完全可见状态。试试这个:

$(".hello").click(function() {
  $(".conf").stop(true, true).show().fadeOut(1000);    
});

.hello {
  visibility: visible;
  transition: opacity 1s;
}

.conf {
  display: none;
  border-radius: 5px;
  background-color: lime;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="hello">hello</span>
<span class="conf">confirmation</span>