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>

Try this:

<!-- create animation for right panel -->
$(".right").hover(function(){
    $(".left").stop().animate({width:'toggle'},350);
    $(".wrap").css("background-color","gray");
});
<!-- create animation for left panel -->
$(".left").hover(function(){
    $(".right").stop().animate({width:'toggle'},350);
    $(".wrap").css("background-color","black"); 
});

Thanks prit, you're so awesome :D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.