javascript - jquery背景色效果

Question

我正在尝试创建一个从左到右改变背景颜色的效果。

我创建了这个：http: //jsfiddle.net/kT95d/58/

    <style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}

#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}

<script>
    $('#div1').mouseover(function (){
    $('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>

但是，我想要水平的文本以及你如何看到，这是垂直的，效果后变为水平的。我不知道这是否是最好的方法。可以帮我？谢谢！！

Answer 1

干得好。我相信这就是你想要的：

http://jsfiddle.net/WVWKE/

变化在这里：

<div id="div1">
    <div style="position:absolute">That was amazing!</div>
    <div id="back">
    </div>
</div>

之前的问题是文本在您的零宽度 div 内，因此它会分成多行以尝试适应。然后，当您将宽度设置为 200 时，文本有空间再次扩展。

在这里，我们将文本从动画背景 div 中移出到父 div 中，然后我们将position:absolute其从流中取出，这样它就不会占用空间。您当然可以将该内联样式移动到您的 CSS 中，并且可能应该这样做。

Answer 2

<style>
    #div1{
        margin-top: -200px;
        height:200px;
        width:200px;
        background-color:green;
    }

    #back {
        width:0px;
        height:200px;
        background-color:Gray;
        display: block;
    }
</style>
<script>
    $('#div1').mouseover(function (){
        $('#back').animate({width: '200px'}, 1000);
    });    
</script>
<div id="text">
    That was amazing!
</div>
<div id="div1">
    <div id="back">
        &nbsp;
    </div>
</div>