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

如果您想滑出潜水，可以使用jQuery UI隐藏方法

$(".button").click(function() {
    $("#box1").hide('slide', {
        direction: "left"
    }, 2000);
});

你也可以这样做以滑入

$("#box2").show('slide', {
    direction: "left"
}, 1000)

Answer 2

这是您正在寻找的效果： 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>

Answer 3

尝试

$(".button").click(function() {
    $("#box1").animate({
        marginLeft: '-150%',
    }, 'slow' );

});

Answer 4

如果你需要，将元素绝对定位在动画之前的同一位置并不困难。

var elm = $("#box1");
var position = elm.position();
var cssObj = {
  'position' : 'absolute',
  'top' : position .top,
  'left' : position.left
}
elm.css(cssObj);

Answer 5

这可能适合你。

$(".button a").click(function() {

    var $docWidth = $(window).width();
    var $boxOffset = $('#box1').offset();

    $("#box1").css('marginLeft', $boxOffset.left);
    $("#box1").animate({
        marginLeft: $docWidth
    }, 'slow');

});

CSS：

#container: { overflow: hidden; }

http://jsfiddle.net/dZUXJ/

滑动div屏幕（边距：0px auto）

5 个答案: