1

我正在使用 CodeAcademy 学习 JQuery。那么当 jquery 在 HTML 元素上创建效果时，特别是fadeOut，它会从页面中删除 HTML 元素吗？还是将其推入某种数据结构中？

问题的原因是，我注意到（在我的以下代码中），一旦按钮淡出，相邻的按钮就会出现。由于我稍后淡入，因此该元素必须存在于某处。那么 JQUERY 究竟是如何工作的呢？

我是 HTML 新手，所以请善待。

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Vanishing Act</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div id="blue"></div>
        <div></div>
        <div></div>
        <div></div>
        <br/><button>Click Me!</button>
    </body>
</html>

CSS

div {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: #F38630;
    border-radius: 5px; }

#blue {
    background-color: #A7DBD8; }

脚本

$(document).ready(function() {
    $('button').click(function() {
        $('#blue').fadeOut('slow');
            $('button').click(function(){
               $('#blue').fadeIn('slow');
            });
    });
});
4

8 回答 8

1

它不会从 DOM 中删除。元素的不透明度值会定期更改/减少，直到 0 并且 CSSdisplay属性更改none为元素。为避免元素向上/向下移动，请在元素上使用自定义动画，仅更改不透明度值。

此外，fadeIn、fadeOut 不会改变 CSS 可见性属性。它会在更改 CSS 不透明度属性后更改 CSS 显示属性。

visibility为了解释 CSS和 CSS属性之间的区别display，这个链接上有一个有趣的例子：http ://www.kavoir.com/2009/02/css-difference-between-opacity0-visibilityhidden-and-displaynone.html

于 2013-01-23T11:26:53.200 回答
0

当您通过萤火虫检查元素时，您可能会注意到当您淡出时样式 display:none被添加到 div 并在您淡入display:inlinestyle时应用

您可以像这样使用此代码

$(document).ready(function() {
    $('button').click(function() {
        $('#blue').fadeToggle('slow');

    });
});
于 2013-01-23T11:01:28.483 回答
0

jQuery 使用display: none它使元素不可见并将其从 UI 中取出。

fadeOut 是这个动画的快捷方式（来自 jQuery 源代码）：

fadeOut: { opacity: "hide" },
于 2013-01-23T11:01:41.130 回答
0

除非您使用remove()jQuery，否则不会从 DOM（“HTML 页面”）中删除元素！jQuery 大量使用 CSS（“样式”），这意味着元素的属性发生了变化。

fadeOut()“only”将效果结束时的可见性设置为“不可见”，但该元素在技术上仍然存在，但不再可见。

从技术上讲，jQuery 使用该display属性并将其设置为none. 但我用“可见性”解释它以便更好地理解。

于 2013-01-23T11:02:30.160 回答
0

如果您在 chrome 或其他工具中打开开发人员工具，您会看到您已经淡出的元素基本上在一段时间内其不透明度降低到 0，然后将显示值设置为“无”，例如

前：

<p>
  If you click on this paragraph
  you'll see it just fade away.
  </p>

中：

<p style="opacity: 0.4566767676767;">
  If you click on this paragraph
  you'll see it just fade away.
  </p>

后：

<p style="display: none;">
  If you click on this paragraph
  you'll see it just fade away.
  </p>
于 2013-01-23T11:02:55.383 回答
0

在淡出 jquery 上，只是将显示样式从以前的（可能是内联块）更改为无。

style="dislplay:inline-block"

到

style="display:none"

然后该元素被隐藏。

在淡入时会发生同样的事情，但 jquery 在淡出之前将显示值存储在变量中。使用该变量，它可以在淡入时检索显示样式。

于 2013-01-23T11:04:39.743 回答
0

FadeOut 和 FadeIn 更改元素的 CSS 'display' 属性，但该元素仍然存在于页面中。

如果您使用的是 Chrome，请右键单击页面中的第一个方块，然后单击“检查元素”。您将在页面底部看到标记代码，并在单击按钮时观看实时更改样式。

于 2013-01-23T11:04:45.433 回答
0

创建一个名为$targetin的变量script.js并使用=符号将其分配给表示有序列表中 #4 的 jQuery 选择器。当您运行代码时，它应该会消失！

于 2014-06-10T17:52:05.363 回答