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

Question

I'm trying to design a website where a dropdown menu is triggered when the user clicks on an image. 我正在尝试设计一个网站，在该网站上，用户单击图像时会触发下拉菜单。 My jQuery uses the following method to do this: 我的jQuery使用以下方法执行此操作：

function main() {
    $('#arrow').click(function() {
        $('.hidden').animate({
            top: '200px'
        }, 400);

        $('#arrow').animate({
            top: '400px'
        }, 400);

        $('#arrow').css("src", "uparrow.jpg");
    });
}

$(document).ready(main);

This works fine for dropping the menu down, but it covers up my page content when it does. 对于下拉菜单来说，这很好用，但是当它覆盖时，它掩盖了我的页面内容。 This is okay, but I'd really like an effect that pushes the entire page below the menu down. 没关系，但是我真的很想要一种可以将菜单下的整个页面向下推的效果。 The catch is, I'd rather not have to set position: absolute; 问题是，我宁愿不必设置position: absolute; on all of the elements in order to animate them. 对所有元素进行动画处理。 Here are the CSS attributes of the menu and related elements for reference: 以下是菜单的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;
}

Here is a Stack Snippet for clarity: 为了清楚起见，这是一个堆栈片段：

 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

You do not want to animate a relatively positioned element because every step of the animation will recalculate a large portion (if not the entire) DOM. 您不希望为相对定位的元素设置动画，因为动画的每个步骤都会重新计算很大一部分（如果不是整个）DOM。 This will look bad on PC and worse on mobile. 这在PC上看起来很糟糕，而在移动设备上则更糟。

The performant solution here is to position your menu and content absolutely and move both simultaneously. 此处的性能解决方案是绝对放置菜单和内容并同时移动它们。

You can achieve even smoother performance by moving your elements around using CSS3's transform and transition properties to enable hardware acceleration. 通过使用CSS3的transform和transition属性移动元素来启用硬件加速，您甚至可以获得更平滑的性能。 You can find a tutorial on this here . 您可以在此处找到有关此内容的教程。

在没有位置的元素上使用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