CODEWITHSUNDEEP
javascriptjquerycssmouseevent
Igor Martins
Igor Martins

Reputation: 2047

Jquery effect - on mouse hover background color change;

I'm trying to create an effect that's, when the mouse over this change the background color from the left to the right. I tried this:

http://jsfiddle.net/WVWKE/

$('#div1').mouseover(function(){
$('#back').animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
$('#back').animate({width: '0px'}, 1000).stop();
});

#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}

#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}


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

But, is not working correctly. If i put the mouse many times on the div, this do the effect many times and don't to. Try to put the mouse and leave many times. The effect happens many times to. Any help?

Upvotes: 2

Views: 1195

Answers (1)

tckmn
tckmn

Reputation: 59273

You are using stop incorrectly. Use it like this:

$('#div1').mouseover(function (){
    $('#back').stop().animate({width: '200px'}, 1000);
});
$('#div1').mouseout(function (){
    $('#back').stop().animate({width: '0px'}, 1000);
});

It's easy to understand if you think about it like it's English:

$('#back')                         // take "back"
.stop()                            // and stop it
.animate({width: '200px'}, 1000);  // and animate it

Fiddle

Upvotes: 3

Related Questions