jquery - jquery在另一个元素下动画和隐藏元素

Question

我对以下情况有疑问。

我有 2 个 div（这是一个示例，请参见图片）当我单击黄色 div 时，它会被动画化并向左移动以完全隐藏在红色 div 下。

我知道我必须使用$.animate()函数来使黄色 div 移动，但是如何将它隐藏在红色 div 下？

Answer 1

z-index是您所需要的，但是您需要确保您的元素相对于position父母的设置正确。尝试这个：

<div id="container">
    <div id="centre"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

#container {
    position: relative;
}
#left {
    position: relative;
    z-index: 20;
}
#right {
    z-index: 10;
}
#centre {
    position: absolute;
    z-index: 15;
}

请注意，我已将此处的 CSS 简化为重要的属性。完整版在小提琴中。

$('#centre').click(function() {
    var $el = $(this);
    $el.animate({ left: "-=" + $el.width() });
});

示例小提琴