jquery 2 fades complete at the same time

Question

Hello again, just another quick one:

I am noticing differences with fadeOut dependant on whether this is a target. Here's my structure.

I have rows of data on my page, and each row has two icons. One is an update icon for that row, one is a delete icon for that row. When a user clicks the update icon for a particular row, I want both the update and the delete icons to fade away. So, in order to fade the thing the user clicked (the update button) and its corresponding delete button, I am using...

$(this).next().add(this).fadeOut('slow');

...which works, but the two elements don't fade at the same time. this fades first (which is the update icon), and then this.next fades out (the delete icon). But if I specify the two elements by name...

$('#updS2, #delS2').fadeOut('slow');

then they fade together. Why is it different?

Apologies for Friday rambling.

====EDIT====

Also noticed the delay using andSelf:

$(this).next().andSelf().fadeOut('slow');

Answer 1

OK, I've found out what the problem was. There was a previous fadeTo command which was acting on all the icons on the page within the same event handler. I moved my code to be in the callback of the fadeTo, and now it works. Should have checked that first. I'll crawl back under my rock now...

So here is the code I am using. All my icons have a class of "action". I wanted to dim all the icons on the page apart from the ones on the row the user clicked on - I wanted these to disappear completely, together in one unit. This works.

$('.action').click(function() {
    var me = $(this);
    $('.action').not(this).fadeTo('slow', 0.2, function() {
        $(me).next().add(me).fadeOut('slow');
    }).unbind('click');
)};

I had to use me because if I used this it faded out all icons not just the two I wanted. Probably a much better way to do it but I thought I'd try to answer the question, even if the answer was "I got it wrong in the first place". Sorry all :S