JS手风琴和动画问题

Question

大家好我需要帮助我在Hover上用jQuery制作的手风琴 我还添加了特定的连续动画，但是在鼠标中输出 我肯定，动画会变得疯狂，不遵循年表 特别是逻辑和需求改善存在问题 请指导如何使用.stop（）函数，帮助会很高 理解！

JS

$(document).ready(function () {
    $(".left").hover(
    function () {
        $(".left").animate({
            width: "798px"
        }, 2000, function () {
            $(".leftImage").animate({
                "left": "-260px"
            }, 1000);
            $(".left>h2, .left>h3").animate({
                "left": "100px",
                opacity: 0
            }, 1000, function () {
                $(".left>h2").animate({
                    "left": "180px",
                        "fontSize": "4em",
                        "line-height": "40px",
                    opacity: 1
                }, 600, function () {
                    $(".left>h3").animate({
                        "left": "-140px",
                        opacity: 1
                    }, 1000);
                });
            });
        });
        $(".right").animate({
            width: "1px"
        }, 2000);
    }, function () {
        $(".left").animate({
            width: "400px"
        }, 1000);
        $(".right").animate({
            width: "400px"
        }, 1000);
        $(".leftImage").animate({
            "left": "200px"
        }, 1000, function () {
            $(".left>h3").animate({
                "left": "-30px"
            }, 600)
        });
        $(".left>h2").animate({
            "left": "-60px",
                "fontSize": "2.4em"
        }, 600);
    });
    $(".right").hover(
    function () {
        $(".right").animate({
            width: "798px"
        }, 2000);
        $(".left").animate({
            width: "1px"
        }, 2000);
    }, function () {
        $(".right").animate({
            width: "400px"
        }, 1000);
        $(".left").animate({
            width: "400px"
        }, 1000);
    });
});

HTML

<div id="wrapper">
    <div class="outMost">
        <div class="outer">
            <div class="left">
                 <h2>Youth</h2>
                 <h3>Hi</h3>
                <img class="leftImage" src="img/yth1.png" />
            </div>
            <div class="right">
                 <h2>Elder</h2>
                 <h3>Hello</h3>
                <img class="rightImage" src="img/old2.png" />
            </div>
        </div>
    </div>
</div>

CSS

.wrapper {
    width:900px;
    margin: 0 auto;
    padding:0;
}
.outMost {
    position: relative;
    width: 900px;
    height: 400px;
    margin: 0 auto;
}
.outer {
    position: relative;
    width: 800px;
    height: 300px;
    margin: 0 auto;
}
.left > h2, .right > h2 {
    position: relative;
    font-family: sans-serif;
    font-weight: lighter;
    font-style: italic;
    font-size: 2.4em;
    top: 16px;
}
.left > h3, .right > h3 {
    position: relative;
    font-family: sans-serif;
    font-weight: lighter;
    font-size: 3.4em;
    top: 100px;
    padding: 4px 4px;
    border-radius: 6px;
}
.left > a, .right > a {
    position: relative;
    text-decoration: none;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-weight: lighter;
    font-size: 16px;
}
.leftImage, .rightImage {
    bottom: 60px;
}
.left {
    position:relative;
    text-align: center;
    width: 400px;
    height: 300px;
    float: left;
    overflow: hidden;
}
.left > h2 {
    position: relative;
    right: 60px;
}
.left > h3 {
    position: relative;
    border: 4px solid;
    width: 52px;
    margin: 0 auto;
    right: 40px;
}
.left > a {
}
.leftImage {
    position: relative;
    float: none;
    display:block;
    margin: auto;
    left: 200px;
}
.right {
    position:relative;
    text-align: center;
    width: 400px;
    height: 300px;
    float: right;
    overflow: hidden;
}
.right > h2 {
    position: relative;
    left: 40px;
}
.right > h3 {
    position: relative;
    border: 4px solid;
    width: 140px;
    margin: 0 auto;
    left: 40px;
}
.rightImage {
    position: relative;
    float: none;
    display:block;
    margin: auto;
    right: 180px;
}