0

我正在创建一个教程，并且想要淡化页面上的每个 div，除了我希望他们看到的 div。我怎样才能使用fadeTo做到这一点？

我目前将其设置为使整个身体褪色。我怎样才能将它设置为从 div id“step2”中淡出身体？

代码：

<script type="text/javascript">
    $("body").fadeTo("slow", 0.5, function() {
      // Animation complete.
    });
</script>
4

5 回答 5

5

没有看到你的 HTML 很难说，但如果你step2的孩子<body>可以这样做：

试试看：http: //jsfiddle.net/SS5Sm/

$("body").children(':not(#step2)').fadeTo("slow", 0.5, function() {
  // Animation complete.
});

或者

$("body > :not(#step2)").fadeTo("slow", 0.5, function() {
  // Animation complete.
});

如果它嵌套更深，你可以试试这个。

$("body > :not(:has(#step2))").fadeTo("slow", 0.5, function() {
  // Animation complete.
});​

尽管它对您的 HTML 结构做了一些额外的假设。

于 2010-08-13T13:35:29.823 回答
1

这听起来像是非选择器的工作

于 2010-08-13T13:36:56.440 回答
1

淡入淡出将始终淡化每个元素，包括您使用 jQuery 选择的元素。除非您要保持可见的 div 直接位于 body 下方，否则这将很棘手。为了达到您想要的效果，您应该克隆您想要可见的 div，并将其绝对定位在与原始位置相同的位置。这也意味着您需要将隐藏的主要内容放在容器 div 中，因此不要淡化 body，而是淡化容器 div，并将克隆的 div 放在 body 正下方的顶层，在容器。

<body>
    <div id="content-to-fade">
        ...<div id="div-i-want-">...</div>
    </div>
    <div id="copy-of-div-i-want">...</div>
</body>

所以在这个例子中，你会创建“copy-of-div-i-want”，附加到正文，然后在“content-to-fade”上调用fadeTo。

这种技术是实现拖放的一种非常常见的方式，因为副本可以轻松有效地绝对定位在屏幕周围。

于 2010-08-13T13:37:32.523 回答
0

用您提供的代码基本上不可能完成您所描述的事情，因为所有元素都必须包含在 body 标记中，并且由于opacity属性继承，页面上的所有内容都将变为半透明。哦，覆盖该opacity单曲上的属性div也行不通。

相反，您需要做的可能是将所有内容移至另一个div，然后淡化那个。使用:not选择器也可能有效，但它不是一个包罗万象的解决方案 - 请注意您的页面结构。

于 2010-08-13T13:43:23.463 回答
0

您可以将 css-selectors 与 JQuery 一起使用 :)

$("*:not(div#step2)").fadeTo(...)
于 2010-08-13T13:35:58.580 回答