jQuery：Toggle Sliding一个div从左到右翻过另一个div

Question

我正在尝试滑动部分隐藏的div（使用margin-right: -300px;放置到元素，将overflow-x: hidden;放置到父级。这是我使用的代码：

<div class="entry-content">
    <div class="first">
        <!-- Content -->
    </div>

    <div class="second">
        <!-- Content -->
    <div class="third">
        <img class="ttoggle" src="http://i61.tinypic.com/21jc3o1.png">
        <!-- Content -->
    </div>
</div>

而且，CSS

.entry-content {
    overflow-x: hidden;
    width: 1140px;
}

.first {
    float: left;
    height: 1000px;
    padding: 10px;
    width : 560px;
}
.second {
    float: left;
    heoght: 1000px;
    padding: 0;
    width: 475px;
}
.third {
    float: left;
    height: 1000px;
    margin: 0 -300px 0 0;
}

现在，我遇到的每个教程都没有工作，或者只是从左边拉div使得它因为可用宽度不足而低于前两个div。

我的目标是在不破坏布局的情况下将div放在第二个div的顶部。所以，我完全迷失在jQuery中的小知识。

这是我想要实现的截图。我希望这能解释我试图实现的目标。

可以使用jQuery完成吗？我当然不希望任何人为我做这份工作，但任何帮助，甚至是可以玩的东西都会非常感激。

Answer 1

您可以使用绝对定位。使用相对于原点的顶部/右侧/底部/左侧或最近的相对定位的父级，将绝对定位的对象放置在任何位置。

首先，将position: relative添加到.entry-content，以便侧边栏相对于它定位。然后，您可以将此CSS添加到.third：

position: absolute; right: 0; top: 0; z-index: 100;

然后在其中制作动画，您可以执行以下操作：

$('.third').click(function(ev) {
    var $this = $(this),
        r = parseInt($this.css('right'), 10);

    $this.animate({right: r ? 0 : 300}, 1000);
});

See Rough Demo