Эффект цвета фона 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>