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”时，不仅包含输入幻灯片的div，还包括“欢迎使用我的网站”。但是，我不希望用户通过点击“欢迎使用我的网站”来滑动。

关于如何实现这一目标的任何想法？

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必须是唯一的。

从屏幕上滑下几个div。 jQuery的

1 个答案: