Question

我正在创建一个教程，并希望淡出页面上的每个div，除了我希望他们看到的div。我怎么能用fadeTo做到这一点？

我目前已准备好让整个身体褪色。如何将它设置为淡化身体而不是div id“step2”？

代码：

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

Answer 1

很难说没有看到您的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结构做了一些额外的假设。

Answer 2

这听起来像是not selector

的工作

Answer 3

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

<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。

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

Answer 4

你可以在jQuery中使用css-selectors：）

$("*:not(div#step2)").fadeTo(...)

Answer 5

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

相反，您需要做的就是将所有内容移动到另一个div，然后淡化该内容。使用:not选择器也可以工作，但它不是一个简单的解决方案 - 请注意您的页面结构。

如何淡化（除了一个div之外的所有东西？

5 个答案: