Question

我试图设计一个网站，当用户点击图片时会触发下拉菜单。我的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;
}

为清晰起见，这是一个Stack Snippet：

＆＃13;

function main() {
  $('#arrow').click(function(){
    $('.hidden').animate({
      top: '200px'
    }, 400);

    $('#arrow').animate({
      top: '400px'
    }, 400);

    $('#arrow').css("src", "uparrow.jpg");
  });
}

$(document).ready(main);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您不希望为相对定位的元素设置动画，因为动画的每个步骤都会重新计算大部分（如果不是整个）DOM。这在PC上看起来很糟糕，在移动设备上会更糟糕。

此处的高效解决方案是绝对定位您的菜单和内容并同时移动。

使用CSS3的transform和transition属性移动元素以启用硬件加速，可以获得更平滑的性能。您可以找到关于此here的教程。

在没有位置的元素上使用jQuery .animate（）：绝对

1 个答案: