Question

我正在尝试创建一个从左到右改变背景颜色的效果。

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

Jquery背景颜色效果

2 个答案: