jQuery动画div滑动，不覆盖文本。

I have some HTML which basically has a div with text in it. I created a second div with absolute positioning and I want it to slide up (originally hidden below the main div) to give the effect of the div filling with new background color.

我有一些HTML，里面有一个带有文本的div。我创建了一个带有绝对定位的第二个div，并且我希望它向上滑动(最初隐藏在主div之下)，以使div填充的效果具有新的背景颜色。

I got the div to slideup, but it always covers the original text. How do I keep it from doing that.

我把div设置为slideup，但它总是覆盖原始文本。我怎么阻止它这么做。

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

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

Code: HTML:

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

1 个解决方案

#1

You could simply wrap a span element around the #blue element's text.

您可以简单地围绕#blue元素的文本包装一个span元素。

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

Then position the span element and increase the z-index:

然后定位跨度元素并增加z指数:

Updated Example

更新的例子

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

1 个解决方案

#1

更多相关文章

随机推荐