jquery animate和hide元素在另一个元素下

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() });
});

Example fiddle