Javascript jQuery动画div向上滑动而不覆盖文本

我有一些HTML，基本上有一个带有文本的div。我创建了具有绝对定位的第二个div，我希望它向上滑动（最初隐藏在主div下方），以提供使用新背景色填充div的效果

我让div滑到slideup，但它总是覆盖原始文本。我怎样才能阻止它那样做

JSFiddle：

代码： HTML:

Jquery

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

---

您可以简单地在

#blue

元素的文本周围包装

span

元素

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

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

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

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