Question

为什么所有内容在下面消失之前都会向下猛拉，我该如何解决？ 使用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>

Answer 1

它与尝试淡化所有元素有关，包括<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 {}放在那里。

这总结了我浪费在寻找不应该首先完成的事情：）

Answer 2

尝试淡出主容器或身体层面的所有元素。例如：

$('body > *').fadeTo('slow', 0.3)

淡出*看起来不是一个好主意。当你有嵌套元素（你可能会这样做）时，它们都会淡出，有奇怪的效果和非常差的表现。

jQuery $（“*”）。fadeTo（）在淡入淡出之前移动内容

2 个答案: