Question

我正在使用JQuery UI来切换效果为.toggle('blind', 250)的div。我已经解决了.stop（）方法但是切换div并不是我的目标，因为当我想切换div #clContainer甚至多次点击时，另一个div #ccConatiner只能切换到下一个什么时候完成......

这是我的代码

$(function(){
  $("#clContainer").on('click', function(){
    $("#ccContainer").toggle('blind', 350);
  });
});

#ccContainer,
#clContainer{
  margin: 10px;
  height: 100px;
  width: 100px;
  background-color: #333;
  cursor: pointer;
  color: #fff;
}

#ccContainer{
  display: none;
}

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
		<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	</head>
	<div>
		<div id="clContainer">
			Click me
		</div>
		<div id="ccContainer"></div>
	</div>
</html>

请帮忙。

Answer 1

每次动画开始时都需要设置一个标志，并在完成动画时清除它。并且在每次点击时检查标志以查看是否存在正在进行的动画，并且如果没有正在进行的动画则仅再次动画。

您可以使用.promise().done()设置一个回调函数，该函数会在您的多维数据集上的所有动画完成后立即运行，并在此回调中清除 animation_ongoing 标志：

var animation_ongoing=0;
$(function() {
  $("#clContainer").on('click', function() {
    if(!animation_ongoing){
      animation_ongoing=1;
      $("#ccContainer").toggle('blind', 350).promise().done(function(){
          animation_ongoing=0;  
      });
    }
  });
});

#ccContainer,
#clContainer {
  margin: 10px;
  height: 100px;
  width: 100px;
  background-color: #333;
  cursor: pointer;
  color: #fff;
}
#ccContainer {
  display: none;
}

<html>

<head>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<div>
  <div id="clContainer">
    Click me
  </div>
  <div id="ccContainer"></div>
</div>

</html>

防止多次单击，直到完成.toggle（）效果

1 个答案: