我正在尝试设计一个网站，当用户点击图片时会触发下拉菜单。我的 jQuery 使用以下方法来执行此操作:
function main() {
$('#arrow').click(function() {
$('.hidden').animate({
top: '200px'
}, 400);
$('#arrow').animate({
top: '400px'
}, 400);
$('#arrow').css("src", "uparrow.jpg");
});
}
$(document).ready(main);
这对于下拉菜单很有效，但它会在下拉菜单时覆盖我的页面内容。这没关系，但我真的想要一种将整个页面推到菜单下方的效果。问题是，我宁愿不必为所有元素设置 position: absolute; 来为它们设置动画。下面是菜单和相关元素的CSS属性供引用:
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#dropdown {
height: 300px;
width: 100%;
background-color: black;
}
为了清楚起见，这里有一个堆栈片段:
function main() {
$('#arrow').click(function(){
$('.hidden').animate({
top: '200px'
}, 400);
$('#arrow').animate({
top: '400px'
}, 400);
$('#arrow').css("src", "uparrow.jpg");
});
}
$(document).ready(main);body {
font-family: Arial;
padding: 0px;
margin: 0px;
}
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#banner {
background-color: gray; /* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
}
#dropdown {
height: 300px;
width: 100%;
background-color: black;
}
/* Fonts and such */
h1 {
color: white;
margin: 0px;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
}
/* Footer stuff */
footer {
height: 350px;
background-color: gray; /* FOR NOW */
}
#footer-border {
background-color: black; /* Probably dark blue later */
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
}
.left {
padding: 10px;
}
.fields {
float: left;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
</head>
<body>
<div id="banner">
<h1>Company Name Placeholder</h1>
</div>
<div id="dropdown" class="hidden">
<ul id="menu" class="hidden unstyled">
<li>PLACEHOLDER</li>
</ul>
</div>
<div id="arrow-box">
<img id="arrow" src="downarrow.jpg"/>
</div>
<div id="content">
Page content will go here.
</div>
<footer>
<div id="footer-border"></div>
<div class="left">
This will be about customers contacting me, etc.
</div>
<div class="right">
<form id="contact" method="post" action"#" accept-charset="UTF-8">
<ul class="fields unstyled">
<li class="fields"><label for="email-address">E-Mail</label><input name="email-address"></input></li>
<li class="fields"><label for="subject">Subject</label><input name="subject"></input></li>
<li class="fields"><label for="message"></label><input name="message"></input></li>
</ul>
</form>
</div>
</footer>
<!-- Scripts down here -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="menu.js"></script>
</body>
</html>最佳答案
您不想为相对定位的元素设置动画，因为动画的每一步都会重新计算大部分(如果不是整个)DOM。这在 PC 上看起来很糟糕，在移动设备上更糟。
此处的高效解决方案是绝对定位您的菜单和内容并同时移动它们。
通过使用 CSS3 的 transform 和 transition 属性来启用硬件加速，您可以获得更流畅的性能。您可以找到关于此的教程 here .
关于javascript - 在没有位置 : absolute 的元素上使用 jQuery .animate()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31928901/