0

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

问题是，如果您在该 div 上快速单击多次，则单击事件将触发新动画，并且每次单击都会运行动画。

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

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

那可能吗 ？

在黄色 div 上快速单击多次。

4

2 回答 2

3

用于.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");
});
于 2013-03-03T22:29:00.227 回答
2

您应该绑定到 click 事件处理程序而不是使用切换，因为它在 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");
});

小提琴

于 2013-03-03T22:33:50.740 回答