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

トグルは 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 に答える