Затухающий эффект действует только один раз

Question

У меня есть сетка изображений (3X4), при нажатии кнопки я хочу отобразить другую категорию изображений в той же сетке. Я добавил постепенное исчезновение и фактически, так что старые изображения исчезают, загружая новые изображения и исчезая в сетке. Моя проблема в том, что это происходит только один раз, после чего нажатие другой кнопки категории не воспроизводит эффект, изображения просто меняются. Это мой код:

    //Fading out the mainGrid
function fadeMainGrid(){ 
    if (isShowingMainGrid) { 
        $('#picturesGrid').removeClass('animated fadeIn')
        $('#picturesGrid').addClass('animated fadeOut')
        isShowingMainGrid = !isShowingMainGrid
    }else { 
        $('#picturesGrid').removeClass('animated fadeOut')
        $('#picturesGrid').addClass('animated fadeIn')
        isShowingMainGrid = !isShowingMainGrid
    }
}

function displayGalleryOf(buttonId) { 
    fadeMainGrid()
    switch(buttonId) { 
        case 'button1':
            displayGallery('CAT1')
            break;
        case 'button2':
            displayGallery('CAT2')
            break;
        case 'button3':
            displayGallery('CAT3')
            break;
        case 'button4':
            displayGallery('CAT4')
            break;
        default:
            displayGallery('CAT1')
    }
}

function displayGallery(galleryName) { 
    //TODO: Load thumbnail of the image to reduce lag.

    let src = './Images/' + galleryName + '/';
    let myGridCells = $('.foodImage')

    for(var i=0; i<myGridCells.length; i++){
        let newSrc = src + i + '.jpg';
        myGridCells[i].src = newSrc;
    }

    fadeMainGrid();

}