0

要素がアニメーション化されているときにクリックできないようにしようとしています。アニメーションが完成したら、もう一度クリックできるようにしたいです。これを達成する方法についての助けを長い間探してきましたが、それを機能させることができず、その理由もわかりません。

HTML:

<p>
   <span class="red" id="a">A</span><span id="llright" class="hide">llright</span> B C D
</p>

文字 A をクリックすると、文字 A が左に移動し、その横にいくつかのテキストがフェード インします。

jQuery:

(function() {

var letterA = $('#a'),
    llright = $('#llright');


$('#a:not(.open)').live('click', function() {
    letterA.animate({
    marginRight: "5.7in",
    }, 1300, function() {
        letterA.addClass('open');
        llright.fadeIn(1300); // Animation complete.
    });

});


$('#a.open').live('click', function() {
    llright.fadeOut(700);
    letterA.delay(700).animate({
    marginRight: "0.0in",
    }, 700, function() {
        letterA.removeClass('open');
    });

});


})();

アニメーションはうまく機能しますが、これはうまくいきません:

if(letterA.is(':animated')) {
    letterA.unbind('click');
};

unbind() の代わりに単純な alert() を挿入しても、最後の部分はまったく機能しません。

ここで本当に助けが必要です。考えられることはすべて試しました。

Thx/オスカー

4

2 に答える 2

1

チェックはページの読み込み時にのみ実行されます。クリック機能の内部をチェックします。

$('#a:not(.open)').live('click', function() {
    if(!letterA.is(':animated')) {
        letterA.animate({
        marginRight: "5.7in",
        }, 1300, function() {
            letterA.addClass('open');
            llright.fadeIn(1300); // Animation complete.
        });
    }
});

また、live（）は非推奨です。on（）への移行を検討してください。

于 2012-04-30T11:38:24.573 に答える
0

さまざまな状況に対応するために、内部分岐を使用して 1 つのクリック ハンドラーをアタッチする方が経済的です。順方向のアニメーション、逆方向のアニメーション、およびアニメーションの進行中に拒否する。

llrightaddClass/removeClass('open') の状態を代わりにテストすることで、なくても逃げることができます。

このような何かがそれを行う必要があります:

$('#a').on('click', function() {
    var $this = $(this),
        llright = $this.next("span");
    if($this.is(":animated") || llright.is(":animated")) {
        return;//reject (no action)
    }
    if(llright.is(":visible")) { //reverse animation sequence
        llright.fadeOut(700, function(){
            $this.animate({
                marginRight: 0,
            }, 700);
        });
    }
    else {
        $this.animate({ //forward animation sequence
            marginRight: "5.7in",
        }, 1300, function() {
            llright.fadeIn(1300);
        });
    }
});

また、このコードでは を使用する必要がないことに注意してください.live()。

于 2012-04-30T17:33:06.150 に答える