0

これが動作デモです。 http://jsfiddle.net/Evqqp/1/

問題を簡単に理解するために、デモを確認してください。矢印をすばやくクリックすると、ビューがめちゃくちゃになることがわかります。

私が行っている300ミリ秒のアニメーションが原因である可能性があることを理解しています。ビューを台無しにしないようにクリックを処理するクリーンな方法は何ですか。フラグを使用して、前のクリック アクションが完了したかどうかを確認できます。しかし、これを行うためのより良い方法がある場合は、意見を求めたかった.

アニメートするコード

$(".rightArrow").on("click", function () {
    if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
        $(".slideBox").animate({
            "margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
        }, 300, checkRightArrow);
        $(".leftArrow").show();
    } else {
        $(".rightArrow").hide();
    }
});

ありがとうございました

4

4 に答える 4

1

試す.stop(true,true)

$(".slideBox").stop(true,true).animate({
于 2013-11-12T15:40:15.020 に答える
1

追加する必要があります

event.stopPropagation();

後：

$(".rightArrow").on("click", function () {

それで：

$(".rightArrow").on("click", function () {
     event.stopPropagation();
     ...
于 2013-11-12T15:46:35.710 に答える
1

要素が現在アニメーション化されているかどうかを次のように確認します

if(!$('#myElement').is(':animated'))
{
    // Do your animation here
}
于 2013-11-12T15:52:35.977 に答える
1

アニメーションを操作するときはいつでもstop()、再度アニメーション化する前に、要素の前のアニメーションを必ず実行する必要があります。

$(".slideBox").stop(true, true).animate(...

http://jsfiddle.net/Evqqp/4/

于 2013-11-12T15:42:10.537 に答える