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>