jQuery : Toggle Sliding A div from left to right over another div

Question

我正在尝试将部分隐藏的 div(使用 margin-right: -300px; 放置到元素上，并使用 overflow-x: hide; 放置到父元素上。这是我使用的代码:

<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