Good day folks,
I have here a code that will animate 2 divs. But, when I hover over a div multiple times, the animation fires several times. Can someone shed some light on this one? Thanks~!
<!DOCTYPE html>
<html>
<head>
<!-- This is where jScript/jQuery starts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").css("height", $(window).height());
$(window).bind("resize",function() {
$("div").css("height", $(window).height());
});
<!-- create animation for right panel -->
$(".right").hover(function(){
$(".left").animate({width:'toggle'},350);
$(".wrap").css("background-color","gray");
});
<!-- create animation for left panel -->
$(".left").hover(function(){
$(".right").animate({width:'toggle'},350);
$(".wrap").css("background-color","black");
});
});
</script>
<!-- This is where jScript/jQuery starts -->
<!-- This is where CSS starts -->
<style type="text/css">
div.left
{
background-color:black;
float:left;
width:50%;
height:100;
}
div.right
{
background-color:gray;
float:right;
width:50%;
height:100;
}
</style>
<!-- This is where CSS ends -->
</head>
<!-- This is the body starts -->
<body>
<div class = "wrap">
<div class = "left"></div>
<div class = "right"></div>
</div>
</body>
<!-- This is the body ends -->
</html>
