我有一个图像网格（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();

}