Building simple jQuery plugin, need assistance

Question

I'm building my first ever jQuery plugin (it's just a simple experiment). Here's what I have so far:

(function($){
$.fn.extend({
    auchieFader: function(options) {
        var defaults = {
            mask: '',
            topImg : '',
        }
        var options = $.extend(defaults, options);
        return this.each(function() {
            var o = options;
            var obj = $(this);
            var masker = $(o.mask, obj);
            masker.hover(function () {
              $(o.topImg).stop().animate({
                "opacity": "0"
              }, "slow");
            }, function () {
              $(o.topImg).stop().animate({
                "opacity": "1"
              }, "slow");
           });    
        });
    }
});   
})(jQuery);

I'm then calling the plugin using:

$('.fader').auchieFader({mask: ".mask", topImg: ".top"});

If I then add another request say:

$('.fader2').auchieFader({mask: ".mask", topImg: ".top"});

Then no matter what instance of my 2 faders I hover both of them will trigger. I know this is because my mask mask and topImg options have the same class - but how can I modify the plugin to allow for these items to have the same class? I know it's probably something really simple, but I'm still finding my way with jQuery and Javascript in general. Any other tips on improving my code would also be greatly appreciated!

Cheers, Chris

Answer 1

try this:

(function($){
$.fn.extend({
    auchieFader: function(options) {

        var
            // defaults options
            defaults = {
                mask: null,
                topImg: null
            },
            // extend options in defaults
            o = $.extend(defaults, options);

        if (!o.mask || !o.topImg) return this;

        return this.each(function() {

            var
                masker = $(o.mask, this),
                topImg = $(o.topImg, this);

            if (masker.length == 0 || topImg.length == 0) return;

            masker.hover(
                function () { topImg.stop().animate({ "opacity": "0" }, "slow"); },
                function () { topImg.stop().animate({ "opacity": "1" }, "slow"); }
            );

        });
    };
});   
})(jQuery);

Answer 2

You seem to already have the answer to your question in the code. For the masker you wrote this:

var masker = $(o.mask, obj);

Which scopes the class in o.mask inside of the dom element obj

I think you just need to do the same thing for o.topImg.

Try changing

masker.hover(function () {
    $(o.topImg)

into

masker.hover(function () {
    $(o.topImg, obj)