为什么所有内容在淡入以下内容之前都会向下猛拉,我该如何修复它?
使用 FireFox 3.6.3,提前致谢。
<html>
<head>
<script type="text/javascript" language="javascript" src="http://localhost/javascript/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#button").click(function(){
$("*").fadeTo("slow",0.0);
});
});
</script>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button">
</body>
</html>
最佳答案
这与尝试淡出所有元素有关,包括 <body>
之外的元素。 。尝试:
$("body > *").fadeTo(..)
但是当您可以简单地对主体本身进行淡入淡出时,为什么要淡出每个元素。
$("body").fadeTo(..)
编辑:更多研究表明,当尝试淡入 <style>
时和<head>
元素(不按特定顺序排列)会导致所有内容向下移动。还不知道为什么,但你可以在这里看到一个例子 - http://jsfiddle.net/UKn8r/2/
编辑2:好的,我想我可能有一个理由。 <head>
及其子元素,例如 <style>
, <script>
等默认设置为 display: none
在用户代理的样式表中。当淡出它们时,jQuery 最终将它们的显示属性设置为 display: block
。现在这些子元素的内容并不意味着要显示在屏幕上,而是通过将它们设置为 display: block
,它显示为一个大约 20px 高的水平 block ,没有任何内容,这会将其他所有内容向下移动。请注意,如果您要清空 <script>
元素并制作 onclick
内联,那么您就不会在 Firefox 上看到跳转,因为该元素将为空,并且即使显示为 block 也不会占用屏幕上的任何空间。因此将其更改为:
<html>
<head>
<script src="http://localhost/javascript/jquery-1.4.2.js"></script>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
</body>
</html>
不会引起任何跳跃。
此外,您的原始代码将在 Webkit 浏览器(Chrome、Safari)上正常工作,如 display
<script>
的样式属性元素不会被覆盖为 block
。但是,对于这些浏览器,如果您有 style
元素内有 some 内容,那么您会看到与 <style>
相同的行为将有一个内联样式属性 display: block
。现在,拥有类似 <style style="display: block; opacity: 0">..</style>
之类的东西似乎完全没用。 ,但这只是对为什么您会看到您所看到的行为的解释。因此,要在这些浏览器上重现相同的问题,请尝试以下代码:
<html>
<head>
<script src="http://localhost/javascript/jquery-1.4.2.js"></script>
<style>p {}</style>
</head>
<body>
<p>Just a normal paragraph doing my job!</p>
<p>Me too!</p>
<input type="button" id="button" onclick='$("*").fadeTo("slow",0.0);'>
</body>
</html>
<style>
属性必须有一些内容,而不是纯空白,所以我把垃圾 p {}
那里。
这结束了我对一开始不应该做的事情的浪费性搜索:)
关于javascript - jQuery $ ("*").fadeTo() 在淡入淡出之前移动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3078251/