javascript - 从屏幕上滑出几个 div。jQuery

Question

我正在使用此代码将 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：

.box {
position: absolute;
left: 150%;
margin-left: -25%;
}

#box1 {

left: 50%;
}

html:

<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 本身之外的其他东西。

例如，我想要类似的东西：

       <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>

当我点击“Enter”时，不仅是带有 Enter 幻灯片的 div，而且还有“Welcome to my site”。但我不希望用户通过点击“欢迎来到我的网站”来滑动。

关于我如何做到这一点的任何想法？

Answer 1

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

$('#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
    });
});

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