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
                });
            }
        });
    })

当快速点击时，动画会出错 - 叠加幻灯片，但文字不会淡出。

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

我试过（＆＃39;：动画＆＃39;）检测并删除停止（true，true），它有效，但是还有其他简单且更好的方法吗？

另外，在上面的代码中，如果我需要使用stop（），我需要为每个animate元素添加stop（）吗？上面的代码我要添加4个stop（），是不是？

谢谢你：）

Answer 1

此代码没有关于快速点击的问题。

$(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);
    }
});
})

Answer 2

您可以删除点击事件，当您点击它时，直到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>

使用回调快速单击jquery animate

2 个答案: