为什么所有内容在下面消失之前都会向下猛拉,我该如何解决？
使用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属性设置为display: block.现在,这些子元素的内容并不意味着显示在屏幕上,但是通过将它们设置为display: block,它将显示为大约20px高且没有内容的水平块,这会将其他所有内容向下移动.请注意,如果您要清空<script>元素并进行onclick内联,那么您将看不到Firefox上的跳转,因为该元素将为空并且即使显示为块也不会占用屏幕上的任何空间.所以改成它:
<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元素中包含一些内容,那么您将看到与<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 {}那里.
这总结了我浪费在寻找不应该在第一时间完成的事情:)
| 归档时间： |
|
| 查看次数： |
312 次 |
| 最近记录： |