Result

jQuery

function next() {
    //300pxスライドさせる
    $('#in').animate({marginLeft: '-300px'}, 600, function() {
        var reStart = $('#in div:first').detach();
            
        $('#in').css('marginLeft', '0px').append(reStart);
    });
}

detach()はremove()とは動作が異なる。

css

#out {
    width:300px;
    height: 100px;
    overflow:hidden;
}

#in{
    width: 1200px;
}

a{color:#4f4742; margin:15px;}

#in div {
    float:left;
    width: 300px;
    height: 100px;
    background: #b0c6e1;
    color:#4f4742;
    margin-right:3px;
    font-size: 25px ;
}

html

<a href="javascript:" onclick="next()">click</a>
<div id="out">
    <div id="in">
        <div>item 1</div>
        <div>item 2</div>
        <div>item 3</div>
        <div>item 4</div>
    </div>
</div>

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.32-2/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7