mouseenter/mouseleave unwanted waving effect

Question

I am fairly new to JQuery. That being said I am trying to use a .mouseenter that causes a image to become larger in size and it returns to normal size on .mouseleave, it works but my problem is it will start a wave effect that loops a random amount of times. it gets really crazy if i mouse over them all.

JQuery

$(document).ready(function() {

    $(".site").mouseenter(function(){
        $(this).animate({
            width: "+=60px",
            height:"+=60px"
        }, 1000);

    });

    $(".site").mouseleave(function(){
        $(this).animate({
            width: "-=60px",
            height: "-=60px"
        }, 1000);

    });
});

Html

<div id="shape">
                    <img src="../images/site1.jpg" class="site"/>
                    <img src="../images/site2.jpg" class="site"/>
                    <img src="../images/site3.jpg" class="site"/>
                    <img src="../images/site4.jpg"class="site"/>
                    <img src="../images/site5.jpg"class="site"/>
                    <img src="../images/site1.jpg"class="site"/>
                    <img src="../images/site2.jpg"class="site"/>
                    <img src="../images/site3.jpg"class="site"/>
                </div>

I have been looking online for about 2 hours now some of my first problems are fixed this wave effect is my last one

Answer 1

Try this:

$(".site").mouseenter(function(){
    $(this).stop().animate({
        width: "+=60px",
        height:"+=60px"
    }, 1000);

});

$(".site").mouseleave(function(){
    $(this).stop().animate({
        width: "-=60px",
        height: "-=60px"
    }, 1000);

});