Blink уведомление / подтверждение с 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>