Question

我有此代码：

$(element).on('click', function() {
    $this.closest('div').before('<span id="message" style="display:none"></span>');
    $('#message').fadeIn().delay(5000).fadeOut();

如您所见，在单击指定元素时，我将在div之前淡入span #message，等待5秒钟，然后淡出该范围。

我尝试在Fadein之前添加stop（），但这仅有助于防止单击时出现多动画，我需要一种防止单击时出现多延迟的方法，因为用户在尝试单击指定的元素时，每5秒就会看到跨度随着对指定元素的点击次数而逐渐减少。

提琴：https://jsfiddle.net/43z78dk6/

Answer 1

http://api.jquery.com/stop/

如果将true传递给stop()，它将跳过所有排队的动画，并且它们将被忽略。

var $element = $('button');

$element.closest('div').before('<span id="elementFade" style="display:none">You clicked him!</span>');

$element.on('click', function() {
                   //pass in true to end all queued animations
                   //you can click all you want
  $('#elementFade').stop(true).fadeIn().delay(5000).fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>You know you want to click me</button>
</div>

防止多次点击识别符

1 个答案: