Javascript 将几个div滑出屏幕。滑动分页

我正在使用以下代码将div滑出屏幕：

$('.box').one('click', function() {
var $this = $(this);
if (this.id !== 'box4'){
$this.animate({
    left: '-50%'
}, 500, function() {
    $this.css('left', '150%');         
    $this.appendTo('#container');

});

$this.next().animate({
    left: '50%'
}, 500);
}
});

css:

html:

第1分部
第2分部
第3分部
第4分部

当我点击div时，我希望能够滑动除div本身之外的其他内容

例如，我想要一些类似于：

       <div id="container">
 <div id="welcomebox"> Welcome on my site </div>
<div id="box1" class="box">Enter</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>

 </div>

欢迎来到我的网站
进入
第2分部
第3分部
第4分部

当我点击“回车”时，不仅是带有回车幻灯片的div，还有“欢迎来到我的网站”。但我不想让用户通过点击“欢迎来到我的网站”来滑动

---

你知道我该怎么做吗？

只需使用jQuery选择器选择另一个框。

---

顺便说一句，你的代码有错误。您给了两个div相同的ID。ID必须是唯一的。

谢谢，但我不确定如何实现这一点。以下是我尝试使用你的解决方案的内容：但它不起作用…@Marcolac，那么，你的问题得到回答了吗？

<div id="container">  
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>

 </div>

       <div id="container">
 <div id="welcomebox"> Welcome on my site </div>
<div id="box1" class="box">Enter</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>

 </div>

$('#box1').one('click', function() {
    var thisbox = $(this);
    var otherbox = $('#welcomebox');
    // method to animate thisbox
    thisbox.animate({
        // animations
    });
    // method to animate the welcomebox
    otherbox.animate({
        // animations
    });
});