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>