Question

当我们淡入或淡出一个元素时，哪个CSS属性正在改变？它是可见性还是显示？

我想编写一个带有if子句条件的代码，说明（伪）：

when the div is visible, do something

示例：

if ( $('#div').is(':visible') ) {
  do something;
}

...但我不确定CSS中的哪个属性或属性已更改。

Answer 1

fadeIn()会将opacity从0更改为1（假设元素从开头隐藏）。

动画完成后，

display将设置为block（默认为400毫秒）。

fadeOut()则恰恰相反。

Answer 2

据我所知，它将改变不透明度属性，而不是显示或可见性属性，这将跨浏览器工作，所以如果它的firefox -moz-opacity将改变等。

http://api.jquery.com/fadeIn/

Answer 3

当你fadeOut()任何元素时，其不透明度从1切换到0并且display属性设置为none。相反的情况发生在fadeIn()方法中（显示属性设置为阻止。）

Answer 4

不透明度。

你也可以自己测试一下。如果你设置一个很长的fadeOut（即：10秒），那么你可以打开你的浏览器控制台，并在它们改变时检查它们。

在HTML文档中添加以下代码：

<强> HTML

<div id="testItem"></div>

<强> CSS

#testItem
{
    display : block;
    width   : 100px;
    height  : 100px;
    background: #0AF;
}

<强>的JavaScript / jQuery的

jQuery(document).ready(
    function(e)
    {
        $('#testItem').click(
            function(e)
            {
                $(this).fadeOut(10000);
            }
        );
    }
);

然后，使用Chrome打开文档，右侧点击我们刚刚创建的div元素。从打开的菜单中选择“Inspect Element”（如果您的浏览器使用其他语言，则应该是菜单的最后一个选项）。然后，Chrome控制台应该打开，并且应该标记为。

最后，点击div元素，你会看到fadeOut / In某个元素时会出现什么问题。

当jQuery FadeOut一个元素时，哪个属性在css中有变化？

4 个答案: