jQuery Forum

I think this is happening because you are selecting multiple items (.popup:not([data-info="xyz"])) and are invoking the callback for each one. When one of these is already faded the first callback seems to trigger immediately, meanwhile the one that is visible fades and then makes the callback, which has already been actioned. You could try adding a visible filter too:

1. $('.additionalInfo li').click(function() {
2.     var thisPopup = $(this).data('id');
3.     $('.popup:not([data-info="' + thisPopup + '"]):visible').fadeOut(250, function() {
4.         $('.popup[data-info="' + thisPopup + '"]').fadeIn(350);
5.     });
6. });

Thanks @solineoz and @kbwood.

@kbwood that makes sense - I can see now that you've said that how that would happen. I did try your syntax and several variations of it though, and it didn't seem to work. I added a console.log statement within the function and it never was written to the console and no errors were thrown.

@solineoz I tried out your syntax and it works beautifully. It made me chuckle as, even though I had read it on the documentation page, it had never occurred to me to use a promise() on a fadeOut(). Makes total sense though, and gives some functions a lot more flexibility and functionality. I'll use this because I was quite unhappy with adding a delay. Given @kbwood's theory it would seem that the promise waits for all of the selected items to complete before the callback is executed.

Thanks!