Javascript Jquery背景色效果

我正在尝试创建一个效果，即从左到右更改背景颜色

我创造了这个：

#第一组{
高度：200px；
宽度：200px；
背景颜色：绿色；
浮动：左；
}
#背{
宽度：0px；
高度：200px；
背景颜色：灰色；
显示：块；
}

$（'#div1'）。鼠标悬停（函数（）{
$（'#back'）。设置动画（{width:'200px'}，1000）；
});
太棒了！

但是，我希望文本是水平的，你能看到什么，这是垂直的，效果之后变成水平的。 我不知道这是不是最好的办法。你能帮我吗？

---

谢谢

给你。我相信这就是你想要的：

变化在这里：

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

太棒了！

以前的问题是，文本位于零宽度div内，因此它被分成多行以尝试匹配。然后，当您将宽度设置为200时，文本有空间再次展开

---

在这里，我们将文本从动画背景div移到父div中，然后给它一个

位置：absolute

，将其移出流，这样它就不会占用空间。当然，您可以将内联样式移动到CSS中，而且可能应该这样做。

给您。我相信这就是你想要的：

<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>

变化在这里：

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

太棒了！

以前的问题是，文本位于零宽度div内，因此它被分成多行以尝试匹配。然后，当您将宽度设置为200时，文本有空间再次展开

在这里，我们将文本从动画背景div移到父div中，然后给它一个

位置：absolute

，将其移出流，这样它就不会占用空间。当然，您可以将该内联样式移动到CSS中，而且可能应该这样做。

<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>

#第一组{
利润上限：-200px；
高度：200px；
宽度：200px；
背景颜色：绿色；
}
#背{
宽度：0px；
高度：200px；
背景颜色：灰色；
显示：块；
}
$（'#div1'）。鼠标悬停（函数（）{
$（'#back'）。设置动画（{width:'200px'}，1000）；
});    
太棒了！

#第一组{
利润上限：-200px；
高度：200px；
宽度：200px；
背景颜色：绿色；
}
#背{
宽度：0px；
高度：200px；
背景颜色：灰色；
显示：块；
}
$（'#div1'）。鼠标悬停（函数（）{
$（'#back'）。设置动画（{width:'200px'}，1000）；
});    
太棒了！

你是说像这样？你是说像这样？