我的菜单运行不正常。当我希望在动画变小之后，菜单中显示的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>
答案 0 :(得分：1)
你的CSS和HTML存在一些问题，基本上你已经设置了一些要浮动到.title div左边的元素，而.title div有一个固定的高度，这导致了菜单跳出.title div高度。
以下是更新的CSS和HTML代码，可以使菜单按照您的描述运行。
<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>
* {
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;
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: auto;
}
.title-element {
height: 627px;
}
.title p {
color: #f3ffff;
display: block;
font-family: "Montserrat",sans-serif;
font-size: 30px;
font-weight: bolder;
position: relative;
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;
position: relative;
width: 100%;
}
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 {
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: "Exo 2",sans-serif;
margin: 10px;
text-align: center;
text-shadow: -1px 0 1px #000000;
transition: all 250ms ease 0s;
width: 20%;
-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;
}