How do I call a function on selected element?

Question

Warning: stupid question! But I have tried looking this up and I can't figure out what to search for or what I am doing wrong. I am trying to make an image fade in, here is my code:

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

and later I have my function:

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

Thanks!!

Answer 1

There are a bunch of different options here depending mostly upon how you want to write your code:

You use .each() to iterate over a jQuery function and call your own function on each item in the collection:

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

---

Or, because your showNice() function expects a jQuery collection already, you could also do this:

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

---

Or, you could ditch the showNice() function and just use jQuery chaining:

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

---

Or you could use built-in jQuery animations instead of the show, opacity and animate:

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

---

Or, you could make showNice() be a jquery plugin like this:

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

And, then you can use showNice just like a jQuery method:

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