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

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

为了清楚起见，这是一个堆栈片段：

 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>

Answer 1

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

此处的性能解决方案是绝对放置菜单和内容并同时移动它们。

通过使用CSS3的transform和transition属性移动元素来启用硬件加速，您甚至可以获得更平滑的性能。 您可以在此处找到有关此内容的教程。

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

问题描述

1 个解决方案

解决方案1
0 2015-08-10 23:56:55

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

问题描述

1 个解决方案

解决方案1 0 2015-08-10 23:56:55

解决方案1
0 2015-08-10 23:56:55