4

クリックすると一定の距離を移動するこのJavaScript関数があります。これは、約 7 div を使用する左から右に移動するスクローラー内で使用されます。私の質問は、クリックを再度使用する前に、最初にクリックを完全に実行するにはどうすればよいですか? 問題は、ユーザーが矢印ボタンをすばやくクリックすると、距離がリセットされ、継ぎ目ではなく画像の中央になってしまうことがあるということです。これを達成するために欠けているコードは何ですか?

$(function () {  

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

});
4

6 に答える 6

4

最も簡単な方法は、アニメーションが行われているかどうかを示すブール値のフラグを持つことだと思いました。

$(function () {

    var animating = false,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        if (animating) {return;}
        var dir = (this.id === "right") ? '+=' : '-=';
        animating = true;
        outerwrap.animate({
            scrollLeft: dir + '251'
        }, 1000, function () {
            animating = false;
        });
    });

});

私のために働く：http://jsfiddle.net/BYossarian/vDtwy/4/

于 2013-09-23T18:28:33.857 に答える
3

.off() を使用して、クリックが発生したらすぐにバインドを解除し、アニメーションが完了したら再度バインドします。

function go(elem){
    $(elem).off('click'); console.log(elem);
    var dir = elem.id == "right" ? '+=' : '-=';
    $(".outerwrapper").stop().animate({ left: dir + '251' }, 3000, function(){
        $("#right, #left").click(go);
    });
}
$("#right, #left").click(function () {
    go(this);
});

jsFiddle の例

この単純化された例では、クリック後すぐにクリック イベントがアンバインドされ、アニメーションが完了するとリバウンドすることがわかります。

于 2013-09-19T14:12:37.477 に答える
2

stop() を作成すると、実際にスライダーを特定のポイントに配置するという事実を見逃していると思います。つまり、スクローラーが 1000px で、左を2 回すばやくクリックすると、おそらく次のようになります。

scrollLeft: 0 - 251
scrollLeft: -2 - 251

したがって、これらの += および -= 計算ではなく、インデックスを使用する必要があると思います。例えば：

$(function () {  

    var numberOfDivs = 7;
    var divWidth = 251;
    var currentIndex = 0;
    $("#right, #left").click(function () {
        currentIndex = this.id == "right" ? currentIndex+1 : currentIndex-1;
        currentIndex = currentIndex < 0 ? 0 : currentIndex;
        currentIndex = currentIndex > numberOfDivs ? numberOfDivs : currentIndex;
        $(".outerwrapper").stop().animate({ scrollLeft: (currentIndex * divWidth) + "px" }, 1000);
    });

});

このアプローチの大きな利点は、クリックを無効にしないことです。何度でもクリックでき、すばやく行うことができます。スクリプトは引き続き機能します。

于 2013-09-19T14:10:49.980 に答える
1

私はBYossarian の答えを 2 番目に挙げます。

これは彼のデモのバリエーションで、ユーザーがボタンをすばやく数回クリックするとアニメーションが「スキップ」されます。

$(function () {

    var targetScroll = 0,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        // stop the animation,
        outerwrap.stop();
        // hard set scrollLeft to its target position
        outerwrap.scrollLeft(targetScroll*251);

        if (this.id === "right"){
            if (targetScroll < 6) targetScroll += 1;
            dir = '+=251';
        } else {
            if (targetScroll > 0) targetScroll -=1;
            dir = '-=251';
        }
        outerwrap.animate({ scrollLeft: dir }, 1000);
    });

});

フィドル

于 2013-09-27T10:04:19.340 に答える
1

これは完全にうまくいきます：

var userDisplaysPageCounter = 1;
    $('#inventory_userdisplays_forward_button').bind('click.rightarrowiventory', function(event) {
        _goForwardInInventory();
    }); 
    $('#inventory_userdisplays_back_button').bind('click.leftarrowiventory', function(event) {
        _goBackInInventory();
    });



function _goForwardInInventory()
{
    //$('#inventory_userdisplays_forward_button').unbind('click.rightarrowiventory');
    var totalPages = $('#userfooterdisplays_list_pagination_container div').length;
    totalPages = Math.ceil(totalPages/4);
//  alert(totalPages);
    if(userDisplaysPageCounter < totalPages)
    {
        userDisplaysPageCounter++;
        $( "#userfooterdisplays_list_pagination_container" ).animate({
            left: "-=600",
            }, 500, function() {

        });
    }

}

function _goBackInInventory()
{
    //$('#inventory_userdisplays_back_button').unbind('click.leftarrowiventory');
    if(userDisplaysPageCounter > 1)
    {
        userDisplaysPageCounter--;
        $( "#userfooterdisplays_list_pagination_container" ).animate({
            left: "+=600",
            }, 500, function() {

        });
    }

}
于 2013-09-19T14:07:06.557 に答える