jquery - div を 1 行にスライドする

Question

ボタンの左/右クリックでdivを一列にスライドさせる方法は? このギャラリーの下部の
ようなもの

これはJSFiddleでの私の試みです

$( "#right" ).click(function() {
    $( ".block" ).animate({ "left": "+=50px" }, "slow" );
    });
    $( "#left" ).click(function(){
    $( ".block" ).animate({ "left": "-=50px" }, "slow" );
    });

Answer 1

これが更新されたFIDDLEです。

leftプロパティの代わりに次を試してくださいscrollLeft：

$( "#right" ).click(function() {
    $( ".box" ).animate({
        scrollLeft: '+=' + $( ".box" ).width()
    });
});
$( "#left" ).click(function(){
    $( ".box" ).animate({
        scrollLeft: '-=' + $( ".box" ).width()
    });
});

これにより、ボックスが最大許容位置を超えるかどうかを確認する必要がないという大きな利点が得られます。

また、CSS を変更する必要があります。

.box {
    width: 600px;
    background-color: #000;
    overflow:hidden;
    white-space: nowrap;
}
.block {
    display:inline-block;
    background-color: #abc;
    width: 90px;
    height: 90px;
    margin: 5px;
    margin-left: 10px;
}

ここで最も重要なこと (メカニズムが機能するために不可欠) はoverflow: hidden、white-space: nowrapin .boxclass とdisplay: inline-blockin .blockclass です。