making this $(this) work

Question

Ok I have a very basic function which moves the background position of a div to give it a 'sheen' effect and a second one which shifts it back.

If I get the div by its ID that works fine. But when I try to make the function a bit more universal by using 'this' - it breaks.

This works fine:

function runsheen() {
$('#sheen').animate({backgroundPosition: '-400px 0px'},1000);
}

function resetsheen() {
$('#sheen').css({backgroundPosition: '-0px 0px'});
}

But this does nothing

function runsheen() {
$(this).animate({backgroundPosition: '-400px 0px'},1000);}

function resetsheen() {
$(this).css({backgroundPosition: '-0px 0px'});}

Running it with the ID version means a new function for every button - rubbish. If I use 'this' I can reuse the code over and over, right? Can anyone help me make this work?

Answer 1

You can't use $(this) in any given function, this is a reference to the object on which the function is being invoked.

The easier way (assuming you're doing this on hover) is to pass the functions directly to the .hover event:

$('div').hover(
  function () {
    $(this).animate({backgroundPosition: '-400px 0px'},1000);
  }, 
  function () {
    $(this).css({backgroundPosition: '-0px 0px'});
  }
);

Or, modify your functions to take an argument and pass in the div to apply the effect to:

function runsheen($div) {
  $div.animate({backgroundPosition: '-400px 0px'},1000);
}

function resetsheen($div) {
  $div.css({backgroundPosition: '-0px 0px'});
}

$('div').hover(
   function () { runsheen($(this)); },
   function () { resetsheen($(this)); }
});

Answer 2

this has a different scope in your second context. this in your second context is referring to the function not #sheen

What you could do is define this to a different meaning outside the function.

var self = this;

function runsheen() {
$(self).animate({backgroundPosition: '-400px 0px'},1000);}

function resetsheen() {
$(self).css({backgroundPosition: '-0px 0px'});}

Answer 3

Make it a jQuery plugin maybe?

$.fn.runsheen = function() {
  this.animate({backgroundPosition: '-400px 0px'}, 1000);
  return this;
});

(same with the other one)

Then you just say

$('#sheen').runsheen();

or if you're in an event handler:

$('#whatever').click(function() {
  $(this).runsheen();
});

Answer 4

The meaning of "this" changes with they way you call your functions. If you call these functions from the document.ready function, it'll give you a document object. If you call it from within another object it'll give you the instance of that object.

Read a bit about Execution Context in jQuery/JavaScript. Try this: http://www.webreference.com/programming/javascript/object-oriented_javascript3/

I'd suggest you get this cleared up and not look for a shortcut becuase this is one of the key concepts in JavaScript/jQuery. So don't look for a quick-fix on this one but try to understand what you want to do and what is happening.