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();
    });

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

Answer 1

如果您使用的是 v1.4.x，因为 issue #7853 我今天早些时候刚刚在他们的错误跟踪器中提出（什么时间！）。您可以通过更改它来修复它：

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

到

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

更新：这是一种更好（更有效）的方法，正如尼克在下面指出的那样：

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

（另请参阅他关于 fadeOut 的说明。）

在 jQuery 1.3.2 和更早的版本中，它会按照您的预期工作。我不知道 1.4.x 的东西是 bug 还是故意的不兼容更改。

问题：为什么不直接淡出容器？如果它包含图像，那也应该使图像淡化，不是吗？如this example? （我不做很多动画，如果我错过了一些微妙的东西，请道歉。） 没关系，你从来没有说过#overlay 是图像，这是我的一个无效假设。