问题描述:

Here is the 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

});

}

});

})

When clicks are made quickly, the animation goes wrong- overlay slides up,but text doesn't fade out.

Each time I click the button, I want to keep the in progress animate run to finish callback animate (not stop the animate, not go to end), ignore button click before in progress animate finish.

I have tried is(':animated') detect and remove stop(true, true), it works, but any other simple and better way to do this?

Also, in the above code, if I need to use stop(), i need to add stop() to every animate element? Above code I have to add 4 stop(), is it right?

thanks you :)

网友答案:

you can remove the click event, when you already have clicked it, untill the animation completes, then you can reAdd the click event, so you are ready for next animation.

See this 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>
网友答案:

This code doesn't have the problem regarding fast click.

$(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);
    }
});
})
相关阅读:
Top