jQuery functions

Question

I'm trying to remove a class from a HTML tag along with adding a new one and also doing some other magic.

Right now I just have a procedure style coding going on... which I know there's another way of doing it. Like creating a function within another function? I'm not sure what it's called and sometimes when trying to do it, it never worked so I went down procedure style type but I figured I post on here and maybe someone can explain to me on how jQuery works? Right now I have like

$(this).removeClass("theClass");
$(this).addClass("theClass");
$(this).slideDown();

I think I can do something like

$(this).removeClass("theClass", function(){
  // other goodness?
});

Thanks everyone. Sorry if i don't make sense.

try this.. $(this).removeClass("yourclassname").addClass("classnametochange"); — user354625
– user354625, Commented Jul 5, 2010 at 0:22

Tim · Accepted Answer · 2010-07-04 22:10:38Z

5

I think what you're looking for is call chaining - since .removeClass returns a jQuery object itself, you can call .addClass directly on the returned object, like so:

$(this).removeClass("classA").addClass("classB").slideDown();

Some animations also take functions called callbacks as arguments; these functions specify actions to take after the animation is complete. For example:

$(this).fadeOut("slow", function() {
    // Callback function - called after fade is done
    alert("fade complete");
});

edited Jul 4, 2010 at 22:10

answered Jul 4, 2010 at 19:24

Tim

60.3k19 gold badges159 silver badges165 bronze badges

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

Comments

Gert Grenander · Accepted Answer · 2010-07-04 19:22:48Z

2

You can do this:

$(this).removeClass("theClass").addClass("theNewClass").slideDown();

You can read more about chaining here.

answered Jul 4, 2010 at 19:22

Gert Grenander

17.1k6 gold badges42 silver badges43 bronze badges

Comments

Mariusz Alef Bąk · Accepted Answer · 2010-07-04 19:39:12Z

2

It depends what you want to achieve. If you just want to do these three operations in sequence you can use chaining as mentioned above. In case you want to execute some of operations when slideDown finishes its animation, you can do it like this:

var that = this;
$(this).removeClass("theClass").sildeDown(function() {
  $(that).addClass("theClass");
});

It will remove the class from element, slide it down and after slide is finished it will add the class again. Use of that variable is necessary as inside the callback anonymous function this keyword can refer to something else than your DOM element. Hope that helps!

edited Jul 4, 2010 at 19:39

answered Jul 4, 2010 at 19:33

Mariusz Alef Bąk

758 bronze badges

Collectives™ on Stack Overflow

jQuery functions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related