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

Question

我有一些 HTML，其中基本上有一个 div，里面有文字。我创建了第二个具有绝对定位的 div，我希望它向上滑动（最初隐藏在主 div 下方）以产生 div 填充新背景颜色的效果。

我把 div 上滑了，但它总是盖住原文。我如何防止它这样做。

代码： 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:

Updated Example

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

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

jQuery animate div sliding up and not covering text

html

javascript

css

jquery

jquery-ui