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

It is impossible to know without seeing your markup. Is the .mask inside the .fader? — Josiah Ruddell
– Josiah Ruddell, Commented Jan 13, 2011 at 16:05

Matthew Manela · Accepted Answer · 2011-01-13 16:10:55Z

1

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)

answered Jan 13, 2011 at 16:10

Matthew Manela

16.8k3 gold badges67 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kirisu_kun Over a year ago

Thank you! I know it was something simple!

andres descalzo · Accepted Answer · 2011-01-13 16:40:47Z

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

Collectives™ on Stack Overflow

Building simple jQuery plugin, need assistance

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related