jQuery动画中的孩子的子代保持不变
[英]children of children in jquery animation stays immobile
问题描述
I have a jquery animation on 100% width and 100% height containers and the children that are position absolute moves with the container but the child of child with two time position absolute doesn't move, why is that? 
我在100％宽度和100％高度的容器上有一个jquery动画，位置绝对的子代随该容器移动，但是两个位置绝对的子代的子代不移动，这是为什么？ How can you get around it? 您如何解决呢？
$(document).ready(function() { var hash = location.hash; console.log(hash); $(window).on("hashchange", function() { hash = hash ? hash : "#page1"; $(hash) //I have tried adding //.css("overflow","hidden"); .animate({ height: "hide" }); hash = location.hash $(hash) //I have tried adding //.css("overflow","hidden"); .animate({ height: "show" }); }); hash ? $(hash).toggleClass("page-active") : $("#page1").toggleClass("page-active"); });
body, html { width: 100%; height: 100%; text-align: center; } .page1 { width: 100%; height: 100%; background-color: cyan; display: none; position: relative; } .page2 { width: 100%; height: 100%; background-color: lime; display: none; position: relative; } .page-active { display: block; } a { color: black; position: absolute; top: 50%; } .hello { position: absolute; top: 3em; left: 3em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="page1" id="page1"> hello <div class="hello"> <div class="i-stay"> Why am I here </div> </div> <a href="#page2">go to page2</a> </div> <div class="page2" id="page2"> hi <a href="#page1">go to page1</a> </div> </body>
1 个解决方案
解决方案1
0 2018-01-16 06:29:33
It's a result of the css you've applied, position: absolute is an absolute position relative to the nearest parent with a position: relative . 这是由于您应用了CSS的结果，即position: absolute是相对于具有position: relative的最近父级的绝对位置。 The link moves because it's absolute but uses a position of top: 50%; 链接是移动的，因为它是绝对的，但使用top: 50%;的位置top: 50%; . 。 Now, look at the code for the object that doesn't move... 现在，查看不会移动的对象的代码...
.hello {
position: absolute;
top: 3em;
left: 3em;
}
...3em is 3em no matter how tall or wide your parent element is. ... 3em是3em，无论您的父元素有多高或多宽。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.