如何在所选元素上调用函数？

Question

警告：愚蠢的问题！ 但是我试过看了这个，我无法弄清楚要搜索什么或者我做错了什么。 我试图让图像淡入，这是我的代码：

$('.Middle-Tennessee').show().showNice(this);

以后我有我的功能：

function showNice(x){
    x.css('opacity', '0');
    x.animate({
        opacity: 1,
    }, 5000);
}

谢谢！

Answer 1

这里有许多不同的选项，主要取决于您希望如何编写代码：

使用.each()迭代jQuery函数并在集合中的每个项目上调用自己的函数：

$('.Middle-Tennessee').show().each(function(index, element) {
    showNice($(element));
});

---

或者，因为你的showNice()函数已经需要一个jQuery集合，你也可以这样做：

var items = $('.Middle-Tennessee').show();
showNice(items);

---

或者，您可以抛弃showNice()函数并使用jQuery链接：

$('.Middle-Tennessee').show().css("opacity", 0).animate({opacity: 1}, 5000);

---

或者你可以使用内置的jQuery动画而不是show，opacity和animate：

$('.Middle-Tennessee').fadeIn(5000);

---

或者，您可以将showNice()设为这样的jquery插件：

jQuery.fn.showNice = function() {
    this.css('opacity', '0').animate({
        opacity: 1,
    }, 5000);
    return this;
}

然后，您可以像使用jQuery方法一样使用showNice：

$('.Middle-Tennessee').show().showNice();

Answer 2

showNice($('.Middle-Tennessee').show());


function showNice(x){
    x.css('opacity', '0');
    x.animate({
        opacity: 1,
    }, 5000);
}

OR

你可以使用jquery fadein

$('.Middle-Tennessee').hide().fadeIn(5000);

Answer 3

showNice不是jQuery方法，它期望jQuery集合作为其参数：

showNice($('.Middle-Tennessee').show());

要使其与$('.Middle-Tennessee').show().showNice();一起使用，您需要将其添加到jQuery集合原型中（通过快捷方式$.fn）：

$.fn.showNice = function showNice() {
    this.css('opacity', '0');
    this.animate({
        opacity: 1,
    }, 5000);
    return this;
};

Answer 4

您只需将jQuery对象作为参数传递给您的函数：

showNice($('.Middle-Tennessee'));

- 或 -

您还可以使用jQuery的fadeIn() 方法：

$('.Middle-Tennessee').fadeIn(5000);

请注意第一个示例中Javascript 函数的使用与第二个示例中的本机jQuery 方法的区别。