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

Question

Hello all,

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); }); 
});

Answer 1

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.

Answer 2

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: