javascript - 将一个 div 滑出屏幕(边距为 : 0px auto)

Question

我有一个水平居中的 div #box1，它有 margin: 5px auto 必须向左滑动并离开屏幕，而 #box2 在点击按钮 .class 时从右边滑入屏幕。我已经看到它是如何为绝对定位的 div 做的，现在如果不是，你该怎么做？

HTML 结构

<div class="button"><a href="#">Slide</a> </div>

<div id="container">

    <div id="box1" class="box">Box #1</div>
    <div id="box2" class="box">Box #2</div>

</div>

尝试失败

$(".button").click(function() {
    $("#box1").css('margin-left', 0);
    $("#box1").css('margin-right', 0);
    $("#box1").animate({
            left: '150%',
        }, 'slow' );

});

Answer 1

这是您正在寻找的效果吗: jsFiddle example .

jQuery:

$(".button").click(function() {
    $("#box1").css('margin-left', 0);
    $("#box1").css('margin-right', 0);
    $("#box1").animate({ left: '-500px' }, 'slow');
    $("#box2").animate({ left: '0px' }, 'slow');
});​

CSS:

#box1, #box2 {
    margin: 5px auto;   
    border: 1px solid #999;
    position:relative;
}
#box2 {
   left:500px;   
}
#container {
    overflow:hidden;
}

HTML:

<div class="button"><a href="#">Slide</a> </div>
<div id="container">
    <div id="box1" class="box">Box #1</div>
    <div id="box2" class="box">Box #2</div>
</div>​