Javascript中的Animate功能

Question

我无法动画我<div>的每一个动画。我不确定我的代码中是否有一些错误，但当我要求它设置动画“顶部”时，我并不感兴趣。并离开＆＃39;？ 我目前的HTML是：

文档

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

<nav>
    <span class="nav-btn"> <img src="nav-icon.svg" style="width: 60px;height: 60px;"></span>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function(){
    $('ul.nav').slideToggle();
})
$(window).resize(function(){

    if ( $(window).width() > 2600 ){

        $('ul.nav').removeAttr('style');
    }

})
</script>

<div class="container" id= "left" >
    <h1 style="color:white"><a>HAIR</a></h1>
</div>

<div class= "container" id= "center">
    <h1 style="color:white"><a>BEAUTY<a/></h1>
</div>

<div class="container" id= "right">
    <h1 style="color:white"><a>BARBERS</a></h1>
</div>

目前无效的javascript是：

<script>
        (function($){
            $(document).on('click', '.container', function(){
                $(this).addClass('active');
                $('.container:not(.active):eq(0)').animate({top: -900, left: 180});
                $('.container:not(.active):eq(1)').animate({top: 900, left: -180});
            });
            $(document).on('click', '.active', function(){
                $('.container:not(.active):eq(0)').animate({top: 0, left: 0});
                $('.container:not(.active):eq(1)').animate({top: 0, left: 0});
                $(this).removeClass('active');
            });
        })(jQuery);
</script>

我的CSS（我认为导致问题，但无法解决）是这样的：

body{
    padding: 0;
    margin:0;
    font-family:'univers';  
}
.nav{
    position: absolute;
    left: 10px;
    background-color:none;
    color: #fff;
    margin: 0;
    z-index: 101;
    list-style: none;
    text-align: center;
}
.nav > li{
    display: inline-block;
    line-height: 1.8em;
}
.nav > li > a{
    text-decoration: none;
    font-size: 15px;
    color: #fff;
}
@media (max-width: 2600px){
    .nav{
        text-align: left;
        display: none;
        position: absolute;
        top: 80px;
        padding: 10px;
    }
    .nav > li{
        display: block;
    }
.nav-btn{
    display: block;
    background-color: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    left: 5px;
    z-index: 101;
}   
.nav-btn:before{
    content: "";
}

}

#left {
    width: 33%;
    height: 95%;
    background:url("../left.jpg") left no-repeat #ffffff;
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);

}

#center {
    width: 33%;
    height: 95%;
    background:url("../center.jpg") center no-repeat #ffffff;
    background-size: cover;
    -webkit-clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

#right {
    width: 33%;
    height: 95%;
    background:url("../right.jpg") right no-repeat #ffffff;
    background-size: cover;
    -webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}

#left:hover{
    background-color: #CC0B1D;
    opacity: 0.4;
    cursor: pointer;
}

#center:hover{
    background-color: #CC0B1D;
    opacity: 0.4;
    cursor: pointer;
}

#right:hover{
    background-color: #CC0B1D;
    opacity: 0.2;
    cursor: pointer;
}

h1{
    position: relative;
    top: 50%;
    margin-left: 43%;
    margin-right: 43%;

}

h1:hover{
    text-decoration: underline;

}

/* Center the demo */
html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

如果有人可以帮助我，我会非常感激。非常感谢，Clarke