jQuery .add 方法

Question

我正在编写一个简单的 jQuery 插件，它在屏幕中心显示具有特定类的图像（单击时为全尺寸），并在图像周围显示灰色覆盖层。当我们点击覆盖层时，它就会消失。现在我使用这段代码：

$("#overlay").click(function(){
        $(this).animate({
            opacity: "0"
        }, 500, function(){
            $(this).css({
                display: "none"
            });
        });

        $("#imgcontainer").animate({
            opacity: "0"
        }, 500, function(){
            $(this).css({
                display: "none"
            });

        });

    });

imgcontainer 保存我们的图像。我试图使用这个更简单的代码，但它不起作用：

$("#overlay").click(function(){
        $(this).add("#imgcontainer").animate({
            opacity: "0"
        }, 500, function(){
            $(this).css({
                display: "none"
            });
        });
    });

为什么它不起作用？

更新：
正确代码：

$("#overlay").click(function(){
        $("#imgcontainer").add(this).fadeOut();
    });

非常感谢您的回复。这种行为（bug？）确实非常令人惊讶。

Answer 1

如果您使用的是 v1.4.x，由于 问题 #7853 我刚刚在他们的今天早些时候的错误跟踪器（什么时间！）。您可以通过更改以下内容来修复它

$(this).add("#imgcontainer").animate(...

：

$(this).add($("#imgcontainer")).animate(...

更新：这是一个更好（更有效）的方法，正如 Nick 在下面指出的：（

$("#imgcontainer").add(this).animate(...

另请参阅他关于 fadeOut.)

在 jQuery 1.3.2 及更早版本中，它会按您的预期工作。我不知道 1.4.x 的事情是一个错误还是故意的不兼容更改。

问题：为什么不淡出容器呢？如果它包含图像，那么图像也会褪色，不是吗？就像这个例子一样？ （我不做很多动画，所以如果我错过了一些微妙的东西，我很抱歉。） 没关系，你从来没有说过#overlay是图像，这对我来说是一个无效的假设。