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?

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.