防止点击触发，如果用户cliks动画

我有一个.box股利，并点击它展开。防止点击触发，如果用户cliks动画

问题是，如果你快速点击多次在该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"); 
});

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

这可能吗？

Click fast many times on the yellow div。

来源

2013-03-03 Vucko

仅供参考..切换事件处理程序已在jQuery的1.8和r弃用emoved在jQuery 1.9 http://api.jquery.com/toggle-event/ – 2013-03-03 22:27:32

@wirey什么是替代切换呢？ – Vucko 2013-03-03 22:28:56

切换只是绑定到点击事件 - 所以你可以绑定到点击事件手处理它在那里 – 2013-03-03 22:35:16

使用.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-03 22:29:00

你应该绑定到单击事件处理程序，而不是使用切换，因为它是在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

来源

2013-03-03 22:33:50

防止点击触发，如果用户cliks动画

回答

相关问题