Passing $(this) to a callback in jQuery?

Question

I have two effects that I want to run one after another, but I can't work out how to pass $(this) to the callback from the first effect.

This is what I have at the moment:

if($(this).hasClass('flag')) {
    $('someElement').slideUp();
    $(this).slideDown();
}

But what I want is for the slideDown to run after the slideUp is complete, ie.

if($(this).hasClass('flag')) {
    $('someElement').slideUp(function() {
        $(this).slideDown();
    });
}

Except $(this) by that stage now refers to someElement instead and so doesn't work as planned.

How do I refer to my original element.flag. I tried using $this = $(this) but I think I must have the syntax wrong.

Any ideas?

Answer 1

Save the reference.

if($(this).hasClass('flag')) {
    var el = this;
    $('someElement').slideUp(function() {
        $(el).slideDown();
    });
}

Answer 2

cache it like this... just don't forget thevar.

var $this = $(this);
if($this.hasClass('flag')) {
    $('someElement').slideUp(function() {
        $this.slideDown();
    });
}

Answer 3

Give this a shot:

var self = $(this);
if(self.hasClass('flag')) {
    $('someElement').slideUp(function() {
        self.slideDown();
    });
}