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>