Question

我正在尝试创建一个能够在单击后消失的元素。代码显然有效但是，如果您尝试多次单击div，您将看到动画重新启动并执行多次。

即使有多次点击，有没有办法让它只播放一次？

以下是我所拥有的：

＆＃13;

$(document).ready(
  function() {
    $('#movingDiv').click(function() {
      $(this).hide('slide', {
        direction: 'right'
      }, 1000);
    });
  });

＆＃13;

#movingDiv {
  width: 50%;
  height: 3em;
  border: 3px solid red;
  color: #000;
  background-color: orange;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>

＆＃13;

Answer 1

您需要在每次点击时清除动画队列，而不是堆叠动画。您可以使用stop()来实现此目的：

$(document).ready(function(){
    $('#movingDiv').click(function() {
        $(this).stop().hide('slide', { direction: 'right' }, 1000);  
    });
});

Working example

这会使动画在您点击时暂时停止

这是事实。这是由于元素动画的缓和效果。一种可能的解决方法是只允许单击元素以隐藏它。

$('#movingDiv').one('click', function() {
    $(this).hide('slide', { direction: 'right' }, 1000);  
});

Working example

Answer 2

使用'unbind'删除第一次点击时的点击处理程序。

$(document).ready(
  function() {
    $('#movingDiv').click(function() {
      $(this).unbind('click').hide('slide', {
        direction: 'right'
      }, 1000);
    });
  });

#movingDiv {
  width: 50%;
  height: 3em;
  border: 3px solid red;
  color: #000;
  background-color: orange;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<div id="movingDiv">Some content.</div>

单击时停止多次执行jquery动画

2 个答案: