j查询菜单，如果语句故障

我有一个菜单无法正常运行。当我希望在动画变小时后，菜单中显示的div 隐藏（） 时。它不是只是短暂消失，然后重新出现在菜单之外。我似乎想不通为什么会这样。菜单部分称为 .title。感谢您的帮助。

jQuery

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video', {
        events: {
            'onReady': onPlayerReady
        }
    });
}
function onPlayerReady() {
    player.playVideo();
    // Mute!
    player.mute();
}
$(".rotate").textrotator({
    animation: "flip",
    speed: 4000
});
$(document).ready(function () {
    var menuBtn   = $(".menuBtn");
    var title     = $(".title");
    var nav       = $("nav"); 
    var navLi     = $("nav").find("li");
    var slideDown = function(){
        if (!title.hasClass("title-element")) {
            title.addClass("title-element", 500);
        };
    };
    var scrollTo = function(place) {
        $(place).animatescroll({
            scrollSpeed: 1000,
            padding: 10
        });
    };
    var close = function(id) {
        if ($("#" + id).is(":visible")) {
            $("#" + id).hide();
            title.delay(250).removeClass("title-element", 500);
            scrollTo('#top');
        }
    };
    var fadeInElement = function(id) {     
        $('#' + id).delay(500).fadeIn(250);
        scrollTo('.title');
    };
    menuBtn.click( function(){
        title.toggleClass("title-menu", 500);
        if (nav.is(":visible")) {
            nav.hide();
        } else {
            nav.delay(500).fadeIn(250);
        }
        $('#about, #works, #contact').filter(":visible").hide();
        title.delay(250).removeClass("title-element", 500);
        scrollTo('#top');
    });
//ABOUT-------------------------------------------------
    $(".about").click( function(){
        slideDown();
        $('#works, #contact').filter(":visible").hide();
        fadeInElement("about");
        close("about");
    });
//WORKS-------------------------------------------------
    $(".works").click( function(){
        slideDown();
        $('#about, #contact').filter(":visible").hide();
        fadeInElement("works");
        close("works");
    });
//CONTACT-----------------------------------------------
    $(".contact").click( function(){
        slideDown();
        $('#about, #works').filter(":visible").hide();
        fadeInElement("contact");
        close("contact");
    });
//------------------------------------------------------
});

.CSS

* {
    margin: 0;
    padding: 0;
}
a:link,
a:hover,
a:active,
a:visited {
    text-decoration: none;
    cursor: pointer;
}
body {
    height: 100%;
    width: 100%;
    background: #000;
    overflow: hidden;
}
.logo-bg {
    z-index: 50;
    position: relative;
    top: -230px;
    width: 802px;
    height: 803px;
    margin: 0 auto;
    display: block;
}
#video {
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -360px;
    width: 720px;
    height: 500px;
}
.title {
    background: url(../img/paper.jpg);
    z-index: 51;
    position: relative;
    top: -470px;
    left: 50%;
    margin-left: -344px;
    width: 695px;
    height: 37px;
    padding: 10px 0;
    border: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
    -webkit-box-shadow: inset 0px 0px 7px #000;
    -moz-box-shadow:    inset 0px 0px 7px #000;
    box-shadow:         inset 0px 0px 7px #000;
}
.title-menu {
    height: 80px;
}
.title-element {
    height: 627px;
}
.title p {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: bolder;
    color: #F3FFFF;
    text-align: center;
    text-shadow:0px 0px 0 rgb(210,210,210),-1px 0px 0 rgb(165,165,165),-2px 0px 0 rgb(120,120,120), -3px 0px 0 rgb(75,75,75),-4px 0px 3px rgba(0,0,0,1),-4px 0px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);
}
.menuBtn {
    z-index: 99;
    position: absolute;
    top: 328px;
    left: 50%;
    margin-left: 290px;
    cursor: pointer;
    -webkit-transition: all 250ms ease;
    -moz-transition:    all 250ms ease;
    -ms-transition:     all 250ms ease;
    -o-transition:      all 250ms ease;
    transition:         all 250ms ease;
    -webkit-filter: drop-shadow(-2px 1px 1px #777);
    filter: drop-shadow(-2px 1px 1px #777);
}
.menuBtn:active {
    margin-left: 288px;
    -webkit-filter: none;
    filter: none;
}
nav {
    margin-top: 10px;
    display: none;
}
hr {
    opacity: .3;
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); 
}
nav li {
    font-family: 'Exo 2', sans-serif;
    color: #eee;
    float: left;
    text-align: center;
    display: inline-block;
    width: 153px;
    margin: 10px;
    cursor: pointer;
    text-shadow: -1px 0px 1px #000;
    -webkit-transition: all 250ms ease;
    -moz-transition:    all 250ms ease;
    -ms-transition:     all 250ms ease;
    -o-transition:      all 250ms ease;
    transition:         all 250ms ease;
}
nav li:hover {
    text-shadow: none;
    color: #444;
}
#about,
#works,
#contact {
    background: red;
    margin: 45px auto 0px auto;
    width: 600px;
    height: 500px;
    display: none;
}

.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" name="viewport" content="width=device-width, initial-scale=1" />
<title>Modeste Web Studio</title>
<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,200' rel='stylesheet' type='text/css'>
<!--CSS-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/simpletextrotator.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<!--Favicon-->
</head>
<body>
    <div id="top"></div>
    <img class="logo-bg" src="img/logo-bg.png" />
    <iframe id="video" type="text/html" src="http://www.youtube.com/embed/ht2TigJp88w?wmode=opaque&autohide=1&autoplay=1&loop=1&playlist=ht2TigJp88w&wmode&start=62&enablejsapi=1" frameborder="0"></iframe>
    <img class="menuBtn" src="img/banner.png" />
    <div class="title">
        <p>
            <span class="rotate">MODESTE,BEAUTIFUL,RELIABLE,MODERN</span> WEB <span class="rotate">STUDIO,DESIGN,DEVELOPMENT,SOLUTIONS</span>
        </p>
        <nav>
            <hr>
            <ul>
                <li class="about">ABOUT</li>
                <li class="works">WORKS</li>
                <li>BLOG</li>
                <li class="contact">CONTACT</li>
            </ul>
        </nav>
        <div id="about">ABOUT</div>
        <div id="works">WORKS</div>
        <div id="contact">CONTACT</div>
    </div>
<!--Javascript-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/animatescroll.noeasing.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/jquery.simple-text-rotator.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>