2

私は一般的にjQueryとWeb開発を始めたばかりなので、素朴な間違いをお許しください。アニメーションを発生させるボタンを作成しようとしています。つまり、このアニメーションは単に「h2」ヘッダーを左から右に移動してから元に戻すだけです (そして、簡単に色を変更します)。

次のコードで私が抱えていた問題は、ユーザーがボタンを複数回クリックすると、ボタンがターンアラウンド ポイントを超えて続行することでした。これが非同期の問題であることを知り、アニメーション呼び出しでコールバック関数を使用してボタン機能を再度有効にしようとしました。

ご覧のとおり、queue:false 変数を設定することでこの問題に対処しました。私はまだこれに慣れていないので、これを行う簡単な方法はありますか?

ご協力いただきありがとうございます！

var toTheRight = true;
$('#animation').click(function () {
    var header = $('h2')[0].style.left.toString();
    var headerNum;
    if (header.length < 5) {
        headerNum = 0;
    }
    else {
        headerNum = +(header.substring(0, header.length - 2));
    }
    if (headerNum >= 450) {
        toTheRight = false;
        $('h2').css("background-color", "green");
    }
    if (headerNum < 100) {
        toTheRight = true;
        $('h2').css("background-color", "orange");
    }
    var modified;
    var stringified;
    if (toTheRight) {
        modified = Math.round((headerNum + 100) / 100) * 100;
        strigified = modified + "px";
        $('h2').animate({
            "font-size": "3em",
            "width": "50%",
            "left": stringified
        }, { queue: false, duration: 1000 });
    }
    else {
        modified = Math.round((headerNum - 100) / 100) * 100;
        stringified = modified + "px";
        $('h2').animate({
            "font-size": "3em",
            "width": "50%",
            "left": stringified
        }, { queue: false, duration: 1000 });
    }
});
4

1 に答える 1

5

そのような場合に関数をラップすることができます：

$('#animation').click(function () {
    if(!$('h2').is(':animated')){
         //your function
    }
})

編集：

ローストが言ったように、これを行うことができます：

$('#animation').click(function () {
    if($('h2').is(':animated')) return;
    //your function
})
于 2013-06-05T20:35:07.790 に答える