Task: On click of li navigation filter show and hide content with a transitional fadein fade out.

Problem I'm just guessing and checking on where to place this fadein//fadeout transition. Furthermore, I feel like my code is too inefficiency because I'm using 4 conditional statements. Would stack lead me in creating a solution to improve the overall logic of this script so I can just make a pretty transition :c?

LIVE CODE

jQuery Script

$(document).ready(function () {

//attach a single click listener on li elements
$('li.navCenter').on('click', function () {

    // get the id of the clicked li
    var id = $(this).attr('id');

    // match current id with string check then apply filter
    if (id == 'printInteract') {
        //reset all the boxes for muliple clicks 
        $(".box").find('.video, .print, .web').closest('.box').show();

        $(".box").find('.web, .video').closest('.box').hide();

        $(".box").find('.print').show();
    }

    if (id == 'webInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
        $(".box").find('.print, .video').closest('.box').hide();
        $(".box").find('.web').show();
    }
    if (id == 'videoInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
        $(".box").find('.print, .web').closest('.box').hide()
        $(".box").find('.video').show();
    }
    if (id == 'allInteract') {
        $(".box").find('.video, .print, .web').closest('.box').show();
    }



});

HTML Selected

<nav>
<ul class="navSpaces">
    <li id="allInteract" class="navCenter">
        <a id="activeAll" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/logo30px.png" /><h3>all</h3></div></a>
    </li>
    <li id="printInteract" class="navCenter">
        <a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3>print</h3></div></a>
    </li>
    <li id="videoInteract" class="navCenter">
        <a id="activeVideo" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/video.gif" /><h3>video</h3></div></a>
    </li>
    <li id="webInteract" class="navCenter">
        <a id="activeWeb" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/web.gif" /><h3>web</h3></div></a>
    </li>
</ul>

ps. Sorry for the newbie question