I am trying to troubleshoot why jQuery is behaving differently based on how I write my function for fading a couple of elements. I have tried a few different approaches where I thought I should get the same results, but appears not true.
Background
In my function I am returning a Promise() based on some conditions. One of my conditions requires to fadeOut() two elements instead of one before I can continue with manipulating the DOM. Here is some pseudo code
function doThisFirst() {
[..some code..]
return new Promise(function (resolve, reject) {
if ([condition 1]) {
$(selector).append(element1)
resolve()
} else if ([condition 2]) {
$(element1, element2)
.fadeOut("slow")
.promise()
.done(function() {
$(element3).fadeIn("slow")
resolve()
})
} else {
$(element1).fadeOut("slow", function() {
$(element3).fadeIn("slow")
})
resolve()
}
})
}
doThisFirst().then(function(){
[..manipulate the new elements in the DOM tree some more..]
})
This issue is focused on the second condition. For some reason, jQuery ignores the second element in my selector when trying to fadeOut. I can swap the two elements in the selector and alternate which element fades but it will only do the first element listed and not both at the same time.
One method I have tried that does work is calling the fadeout() individually like
$(element1).fadeOut("slow")
$(element2).fadeOut("slow")
If I do this approach, I need to tie both elements' fadeOut to the resolve() on the Promise.