代码之家 › 专栏 › 技术社区 › Babiker

jquery$(“*”).fadeto()在淡出前移动内容

jquery javascript

Babiker · 技术社区 · 14 年前

为什么所有的内容在下面淡入淡出之前都会向下猛拉,我如何修复它?
使用火狐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>

2 回复 | 直到 14 年前

Anurag 14 年前

它与尝试淡化所有元素有关,包括那些 <body> . 尝试:

$("body > *").fadeTo(..)

但是,当你可以简单地对身体本身进行淡入淡出时,为什么你要淡出每个元素呢?

$("body").fadeTo(..)

编辑 :更多的研究表明,当试图淡化 <style> 和 <head> 元素,没有特殊的顺序,导致所有东西向下移动。还不知道为什么,但你可以在这里看到一个例子- http://jsfiddle.net/UKn8r/2/

编辑2 好吧,我想我在这里可能有原因。这个 <头& 及其子元素,如 <风格& GT; , <script> 等默认设置为 display: none 在用户代理的样式表中。当淡出时,jquery最终将其显示属性设置为 display: block . 现在,这些子元素的内容并不打算显示在屏幕上,而是通过将它们设置为 显示:块 它被显示为一个大约20px高的水平块,没有任何内容,这会将其他东西向下移动。请注意,如果要清空 <脚本& GT; 元素并使 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 的Style属性 <脚本& GT; 元素不会被重写为 block . 但是,对于这些浏览器,如果 style 元素与一些它里面的内容,那么你会看到与 <风格& GT; 将具有内联样式属性 显示:块 . 现在,拥有这样的东西似乎毫无用处, <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>

这个 <风格& GT; 属性必须包含一些内容,而不是纯空白,因此我将垃圾 p {} 那里。

这就结束了我对不应该首先做的事情的浪费性搜索:)

Kobi 14 年前

试着淡出你的主容器,或者身体层面的所有元素。例如:

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

渐隐 * 看起来不是个好主意。当您有嵌套元素(并且可能有嵌套元素)时,它们都将淡出,具有奇怪的效果和异常糟糕的性能。