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

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 im开发者_运维百科age count
  $li.addClass('create', 2000, function() { $li.removeClass('create', 500); }); 
});

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.

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: