Jquery UI: Animating remove class on callback of animating add class fails

Question

When some new list item is added I want it to 'blink' by animating adding a class and removing it after on the callback.

This is the code:

$li.addClass('new', 1000, function() {
    $li.removeClass('new', 500);
});

Css:

#galleries-list li {
    margin-top: 10px;
    background-color: #EEFFFF;
    border: 1px solid #99FFFF;  
    }
#galleries-list li.new {
    background-color: #DDFFBB;
    border: 1px solid #99FF66; 
    }

UPDATE:

I found what went wrong. When I removed the fadeOut it works. I have no idea why. Maybe you can check this and sent it to the jQuery UI dev's.

$('input, img', $li).fadeOut(150, function() {
  $gallery.set($li, name, 0); //Clears html and sets gallery name and image count
  $li.addClass('create', 2000, function() { $li.removeClass('create', 500); }); 
});

Aha! You can use callbacks in addClass. +1 for being more useful than the documentation. — Nathan
– Nathan, Commented Mar 30, 2012 at 16:13

honeybuzzer · Accepted Answer · 2010-01-05 22:16:25Z

5

I don't think addClass and removeClass have duration parameters. http://docs.jquery.com/Addclass

You could try

li.addClass("new").animate({"opacity" : 1}, 500, function(){ li.removeClass("new"); });

This will add the "new" class, then pause for half a second, then remove the class.

answered Jan 5, 2010 at 22:16

honeybuzzer

1394 bronze badges

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

1 Comment

Gilbert Over a year ago

jQuery UI makes the duration option possible

Doug Neiner · Accepted Answer · 2010-01-05 22:39:42Z

1

Known bug This does not work in Safari 4, but it has been fixed in the yet unreleased (at the time of this writing) 1.8 version of jQuery UI.

Sorry, I have removed my answer because your code is completely correct. However, even their demo for addClass does not work in Safari 4, but worked fine in Firefox 3.5.

Update: You can see your code working here, if you visit the page in Firefox 3.5:

edited Jan 5, 2010 at 22:39

answered Jan 5, 2010 at 22:18

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

5 Comments

Gilbert Over a year ago

When i make a callback function and log something it works.. I agree that it's not in the documentairy

Gilbert Over a year ago

Yes, I just noticed Safari won't work. Well then I'll won't use jQuery ui

Doug Neiner Over a year ago

@unknown, don't give up on it yet... I just sent a message to one of the core team members... Its a known bug that has been fixed in jQuery UI 1.8a2. As soon as 1.8 is released it will be fixed.

Gilbert Over a year ago

mm still Unknown, i should change that. I'll sit still and wait for it.

Gilbert Over a year ago

That works great! Thanks for all the help, i'll keep searching now why mine isn't working.

Collectives™ on Stack Overflow

Jquery UI: Animating remove class on callback of animating add class fails

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related