我正在尝试为导航设置动画，从屏幕外到屏幕上，反之亦然。我的电脑上有 jquery.min.js(最新版本)并且导航没有从左侧开始动画。我所做的只是第一步:单击对象后为导航设置动画。这是我想出的:我将我的作品上传到 JSFiddle:http://bit.ly/VQIXlF
这是我目前所拥有的:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/Default.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../JS/Script.js"></script>
</head>
<body>
<h1 class="menu-open" id="open">Open</h1>
<div class="nav" id="nav">
<div class="menu">
<h1>Menu</h1>
<div class="elements">
<h2 class="home"><a href="#">Home</a></h2>
<h2 class="about"><a href="#">About</a></h2>
<h2 class="code"><a href="#">Products</a></h2>
<h2 class="design"><a href="#">Contact</a></h2>
<h2 class="gaming"><a href="#">Find Us</a></h2>
<h2 class="more"><a href="#">More</a></h2>
</div>
</div>
</div>
</body>
</html>
jquery:
var main = function(){
$('.open').click(function(){
$('.nav').animate({
left: "0px"
}, 200);
});
};
$(document).ready(main);
CSS:
body{
margin: 0 auto;
}
.nav{
top:0;
left: -300px;
z-index: 1;
position: fixed;
height:100%;
width:300px;
background-color: #336ca6;
}
.menu-open{
position:absolute;
left:500px;
cursor: pointer;
}
.menu{
font-family: arial;
width:300px;
}
.menu h1{
position:relative;
left:100px;
color: #a0a0a0;
}
.menu h2 {
border-bottom: 1px solid #aaaaaa;
padding-left:20px;
padding-bottom:20px;
width:280px;
}
.menu .elements{
margin-top:35px;
}
.menu a{
text-decoration: none;
font-family: arial;
color:#efefef;
width:300px;
}
.menu a:hover{
color:#aaaaaa;
transition:color 0.5s;
}
.menu .home{
border-top: 1px solid #aaaaaa;
padding-top:20px;
}
请帮忙!
最佳答案
实际上最简单的答案是您在脚本中使用了“.open”，其中 open 是一个 id...更改
$('#open').click(function() /* add the # instead of . */
应该可行
关于jquery - 网站中的导航动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25532162/