When the svg is clicked you immediately set it to display:none so there is nothing that you can fade. At the same time as you click the svg you start fading in the new background.
Therefore it seems you would have to delay the new background from fading in while you fade the svg page out. The svg could not be display:none as that is not amitable.
That is not a simple task as there is a lot going on in that code right now. You will need to hide the svg using the visibility method, or move them off screen or clip them to zero after the animation has finished. Then you need to delay the new background from fading in too soon.
My brain hurts just thinking about it 