jQuery動畫div向上滑動且不覆蓋文本

Question

我有一些HTML，其中基本上包含帶有文本的div。 我創建了具有絕對定位的第二個div，並希望它向上滑動（最初隱藏在主div下方），以使div填充新的背景色。

我將div放到幻燈片上，但是它始終覆蓋原始文本。 我如何避免這樣做。

JSFiddle： http : //jsfiddle.net/SmAHU/206/

代碼：HTML：

<div id="container">
    <div id="blue">Hey</div>
    <div id="green"></div> </div> <input type="button" value="up" id="button" />

CSS

#container    {position:relative; overflow:hidden; height:50px; width:50px; }
#blue         {height:50px; width:50px; background:#009; position:relative; top:0; left:0; color:white;}
#green        {height:50px; width:50px; background:#090; position:absolute; top:50px; left:0;}

jQuery的

$('#button').toggle(function() {
    $('#green').animate({
        top: 0
    }, 1000, function() {
        $('#button').val('down');
    });
}, function() {
    $('#green').animate({
        top: '50'
    }, 1000, function() {
        $('#button').val('up');
    });
});

Answer 1

您可以將span元素簡單地包裹在#blue元素的文本周圍。

<div id="container">
    <div id="blue">
        <span>Text</span>
    </div>
    <div id="green"></div>
</div>

然后span元素並增加z-index ：

更新示例

#blue > span {
    position: relative;
    z-index: 1;
}