Hi guys I need help with an accordion I have made in jQuery on Hover
I have also added specific consecutive animations but in mouse out
the animation go crazy and do not follow the chronology, I am sure
there is an issue with the logic and needs improvements especially
please guide how to use .stop() function, help will be highly
appreciated!

Code:
-------------HTML-----------------

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">


    <title></title>

    <meta name="viewport" content="width=device-width, user-scalable=no">

    <link rel='stylesheet' href='css/reset.css' type='text/css'>
    <link rel='stylesheet' href='css/style.css' type='text/css'>

</head>
<body>



    <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>



</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/zm.js"></script>
<script type="text/javascript" src="js/main.js"></script>


</html>


-------------------------------------------------------------------------

----------------------------------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;
            }



-------------------------------------------------------------------------

--------------------------------- 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);
        }
    );


});

------------------------------------------------------------------------------

Please look in to it!

Thanks in advance,
Michelle.G