How to pass $(this) reference to a call back function?

Question

I have the following animations in my web page:

     $(".anim-item").not(this).animate({
        opacity: 0,
     }, { queue: true, duration: 1000 } , function() {
        // Animation complete.
     });

     $(this).animate({
        left: 200,
     }, { queue: true, duration: 1000 } , function() {
        // Animation complete.
     });

Currently both the animations are running simultaneously. I want the second animation to run after the first one. I tried putting the second one inside the callback function, but cannot find a way to get the $(this) reference working. Any idea how to get this working?

Thanks in advance.

Answer 1

Save it under a different name, like this:

 var myThis = this;
 $(".anim-item").not(this).animate({
    opacity: 0,
 }, { queue: true, duration: 1000 } , function() {
    $(myThis).animate({
       left: 200,
    }, { queue: true, duration: 1000 } , function() {
       // Animation complete.
    });
 });

The closure of the inner function will make sure it's visible.

Answer 2

Make an alias for this via

var _this = this;

If you write a jQuery query $('.abc') and use functions like click, hover etc, this will always reference to current DOM node jQuery is processing.

Answer 3

Store this in a local variable.

var _this = this;

$(".anim-item").not(this).animate({
        opacity: 0,
    }, { queue: true, duration: 1000 } , function() {
        // Animation complete. Next animation
        $(_this).animate({
            left: 200,
        }, { queue: true, duration: 1000 } , function() {
            // Animation complete.
        });
    }
);

Answer 4

Two ways:

• cache this in a local variable before calling .animate()
• use .proxy() to pass your this reference to .animate()

example 1:

var func = function(){
   var self = this;

   $(".anim-item").not(this).animate({
     opacity: 0,
     }, { queue: true, duration: 1000 } , function() {
        self.animate({});
     });
};

example 2:

var func = function(){
   $.proxy($(".anim-item").not(this).animate({
   }), this);
};

Answer 5

In a jQuery callback function this is always set to the DOM element that the function applies to.

If you want access to this in your first callback function you'll have to create a reference to it before you animate:

 var self = this;
 $(".anim-item").not(this).animate({
    opacity: 0,
 }, { queue: true, duration: 1000 } , function() {
    $(self).animate({
        left: 200,
     }, { queue: true, duration: 1000 } , function() {
        // Animation complete.
     });
 });

Answer 6

Your function is wrong, if you are declaring options, then the callback goes in the options object:

$(".anim-item").animate({
   opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
   $(this).animate({
      left: 200,
   }, { queue: true, duration: 1000, complete: function() {
      // Animation complete.
   }});
}});

Also, don't make a global variable containing the item, that's just asking for trouble, especially as jquery will maintain it for you in this instance, if you need to declare a new variable for the object in chaining, generally you are not doing it right ;)