快速点击带有回调的jquery动画

Question

这里是code

<div id="button" class="overlay-down">click</div>
    $(function () {
        $('#button').on('click', function(){
            if($(this).hasClass('overlay-down')) {
                $(this).removeClass('overlay-down').addClass('overlay-up');
                $('#text').stop(true, true).animate({opacity: 0}, 800, function() { // fade #text
                    $('#overlay').stop(true, true).slideUp(500); // then slideup #overlay
                });
            } else
            if($(this).hasClass('overlay-up')) {
                $(this).removeClass('overlay-up').addClass('overlay-down');
                $('#overlay').stop(true, true).slideDown(500, function(){ // #overlay come back
                    $('#text').stop(true, true).animate({opacity: 1}, 800); // then #text come back
                });
            }
        });
    })

当快速点击时，动画会出错 - 叠加层向上滑动，但文本不会淡出。

每次单击按钮时，我都希望保持正在进行的动画运行以完成回调动画（不停止动画，不去结束），在进行中的动画完成之前忽略按钮单击。

我已经尝试过 is(':animated') 检测并删除 stop(true, true)，它可以工作，但是还有其他简单更好的方法吗？

另外，在上面的代码中，如果我需要使用stop()，我需要将stop() 添加到每个动画元素吗？上面的代码我要加4 stop()，对吗？

谢谢你:)

Answer 1

你可以删除点击事件，当你已经点击了它，直到animation完成，然后你可以重新添加点击事件，这样你就可以准备下一个动画了。

看到这个FIDDLE

$(function() {
  $('#button').on('click', fun);
})

function fun() {
  $('#button').off('click', fun);
  if ($(this).hasClass('overlay-down')) {
    $(this).removeClass('overlay-down').addClass('overlay-up');
    $('#text').stop(true, true).animate({
      opacity: 0
    }, 800, function() { // fade #text
      $('#overlay').stop(true, true).slideUp(500, function() {
        $('#button').on('click', fun);
      }); // then slideup #overlay
    });
  } else
  if ($(this).hasClass('overlay-up')) {
    $(this).removeClass('overlay-up').addClass('overlay-down');
    $('#overlay').stop(true, true).slideDown(500, function() { // #overlay come back
      $('#text').stop(true, true).animate({
        opacity: 1
      }, 800, function() {
        $('#button').on('click', fun);
      }); // then #text come back
    });
  }
}

.wrapper {
  width: 300px;
  height: 300px;
  background: red;
  position: relative;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  opacity: 0.75;
}
#text {
  color: #000;
  font-weight: 700;
  font-size: 20px;
  line-height: 300px;
  position: relative;
  text-align: center;
}
#button {
  background: #000;
  color: #fff;
  width: 300px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="overlay"></div>
  <div id="text">
    <p>text here text here</p>
  </div>
</div>

<div id="button" class="overlay-down">click</div>

Answer 2

这段代码没有快速点击的问题。

$(function () {
$('#button').on('click', function(){
    if($(this).hasClass('overlay-down')) {
        $(this).removeClass('overlay-down').addClass('overlay-up');
        $('#text').stop(true, true).animate({opacity: 0}, 500);
        $('#overlay').stop(true, true).slideUp(800);
    } else
    if($(this).hasClass('overlay-up')) {
        $(this).removeClass('overlay-up').addClass('overlay-down');

        $('#overlay').stop(true, true).slideDown(500);
        $('#text').stop(true, true).animate({opacity: 1}, 800);
    }
});
})