Question

我有一个.box div，点击它会展开。

问题是如果你在该div上多次快速点击，click事件将触发新动画，动画将在每次点击时运行。

HTML

<div class="box">
    <div class="title">
        <label>Some title</label>
    </div>
    <div class="text">
        <label>Some text that is longer then the title text</label>
    </div>
</div>

JQuery的

$('.box').toggle(function() {
    $(this).attr("selected", "true");
    $(this).animate({"height": "529px", "width": "460px"}, "slow");
},function() {
    $(this).animate({"height": "163px", "width": "220px","z-index":"10"}, "slow");
});

我想以某种方式禁用点击，直到动画完成一次。

这可能吗？

Click fast many times on the yellow div

Answer 1

使用.is(':animated')检查对象目前是否已设为动画，例如http://jsfiddle.net/65W2G/执行此操作：

$('.box').toggle( function () {
    if ($(this).is(':animated')) {
        return;
    }
    $(this).attr("selected", "true");      
    $(this).animate({"height": "529px", "width": "460px"}, "slow");
}, function () {
    if ($(this).is(':animated')) {
        return;
    } 
    $(this).animate({"height": "163px", "width": "220px","z-index":"10"}, "slow");
});

Answer 2

你应该绑定到click事件处理程序而不是使用toggle，因为它在jQuery 1.8中已被弃用，并从jQuery 1.9开始被删除

$('.box').click(function() {
    var $this = $(this);
    if($this.is(':animated')){
        return false;   // return false if it's already animating
    }
    // determine height/width to animate too
    var height = $this.height() == 529 ? '163px': '529px';
    var width = $this.width() == 460 ? '200px' : '460px';

    $this.attr("selected", "true");
    $this.animate({"height": height, "width": width}, "slow");
});

FIDDLE

如果用户在动画时单击，则阻止单击触发器

2 个答案: