CODEWITHSUNDEEP
javascriptjquerycss
Igor Martins
Igor Martins

Reputation: 2047

Jquery background color effect

I'm trying to create an efect that's change de background color from left to right.

I have created this: 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>

But, i want the text in horizontal and how you can see, this is vertical and after the effect go to horizontal. I don't know if this is the best way to do this. Can help me? Thanks!!

Upvotes: 0

Views: 340

Answers (2)

Silvertiger
Silvertiger

Reputation: 1680

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

Upvotes: 1

Jonah
Jonah

Reputation: 16242

Here you go. I believe this is what you want:

http://jsfiddle.net/WVWKE/

Change is here:

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

The problem before was that the text was inside your zero width div, so it was breaking onto multiple lines to try to fit. Then when you animated the width back to 200, the text had room to expand again.

Here we move the text out of the animated background div and into the parent div, then we give it a position:absolute to take it out of the flow so it doesn't take up space. You can of course move that inline style to your CSS, and probably should.

Upvotes: 3

Related Questions