1

私はここでこの問題を抱えていましたjavascript - クリックが再び機能する前に onclick が完全に機能する必要があるため、機能させる方法がわかりませんでした。そこで、スクロール内で div から div に移動しようとする計画 B に進みます。現在、私の HTML は次のようになっています。

HTML

<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
    </div>
</div>
<div class="buttons">
    <div id="left">
    <div id="right">
</div>

JavaScript

$(function () {  // DOM READY shorthand

    $("#right, #left").click(function () {
        var dir = this.id == "right" ? '+=' : '-=';
        $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
    });

});

そのため、現在、別のクリックイベントが発生する前に、最初に251px全体を移動させようとしていました. 問題は、ユーザーが矢印を複数回クリックすると、イベントがリセットされ、スクロール内から最初からやり直すため、フレームからフレームに移動する代わりに、フレームの途中で開始してフレームの途中で終了する可能性があることです。 . イベントが再び発生する前に、javascript のアクションを最初に完了させて 261 ピクセル全体にする方法を理解できなかったので、ユーザーができるように div から div に移行する方法があるのではないかと考えていました。何度でもクリックすると、div から div にスムーズに移行し、完了したら途中で終わることはありませんか?

4

1 に答える 1

3

それがon()とのoff()目的です:

$(function () {
    var buttons = $("#right, #left");
    buttons.on('click', ani);

    function ani()
        buttons.off('click');

        var dir = this.id == "right" ? '+=' : '-=';
        $(".outerwrapper").animate({ scrollLeft: dir + '251' }, 1000, function() {
            buttons.on('click', ani);
        });
    }
});

別のオプションは、現在スクロールされている位置に依存するのではなく、自分自身を追跡する変数に依存することです。

$(function () {
    $("#right, #left").on('click', function() {
        var wrap = $(".outerwrapper"),
            dir  = this.id == "right" ? 251 : -251,
            Left = (wrap.data('scroller') || 0)  + (dir);

        $(".outerwrapper").animate({ scrollLeft: Left }, 1000);
        wrap.data('scroller', Left);
    });
});
于 2013-09-23T17:58:39.393 に答える