Jquery 2 ends at the same time

Question

just another quick one:

I notice differences with fadeOut depending on whether this is the goal. Here is my structure.

I have data rows on my page and each row has two icons. One of them is the update icon for this line, one is the delete icon for this line. When a user clicks on the refresh icon for a specific row, I want both the update and the delete icons to disappear. So in order to disappear the thing that the user clicked (refresh button) and the corresponding delete button, I use ...

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

... which works, but both elements do not disappear at the same time. this one disappears first (this is an update icon) and then this.next disappears (delete icon). But if I specify two elements by name ...

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

then they disappear together. Why is it different?

Apologies for the plinth on Friday.

==== ==== EDIT

Also noticed a delay using andSelf:

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

Answer 1

Well, I found out what the problem is. There was a previous fadeTo command that worked on all the icons on the page in one event handler. I moved my code to the fadeTo callback and now it works. Had to check it out first. Now I will jump under my rock ...

So here is the code I'm using. All of my badges have an action class. I wanted to put out all the icons on the page except those that were clicked by the user - I wanted them to disappear completely together in one block. It 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 would disappear with all the icons of not only the two that I wanted. This was probably a much better way to do this, but I thought I would try to answer this question, even if the answer was "I made a mistake first." Sorry, everyone: S