jQuery plugin only works on the last apperance of the selector

Question

I'm doing a jquery plugin that moves the background of a div (based on another plugin). I don't understand why if I've only 1 on element using $(".video").moveBackground(); works well. If I've 2 elements or more, only works the last one.

The code: http://jsfiddle.net/7PfEN/ . It doesn't works on jsfiddle but works fine (well, only the last) in local.

Thanks in advance!

Answer 1

I believe your problem is that the plugin uses a sys object for storing the animation timer, and the sys object is global for all of the elements you pass in via a single call to .moveBackground().

So while this won't work...

$('.video').moveBackground();

I believe this would...

$('.video').each(function(){
  $(this).moveBackground();
});

Answer 2

First, your jsFiddle is trying to $(".image").moveBackground() instead of $(".video")

But the real problem is that each call to init() is overwriting your global sys.elem value. In greatly abbreviated form, here's an approach that might work for you:

function init(elem) {
  ...
  $(elem).hover( function() {
    ...
  });
}
...
return this.each(function () { init(this); });

You'll need to pass elem on down through the various functions, using it wherever you currently have sys.elem.