Embedding a function inside .delay() doesn't work porperly

So I have HTML with a table and each column has button which should fade out that table and then fade in another DIV which contains info regarding about that specific column I clicked on. so the Jquery looks like this:

  $(document).ready(function(){
    $('#motoBttn').bind('click', function(){
        $('#ServicesContent').fadeOut();
            $('#infoSlector').fadeIn();
            $('#motoDescContent').fadeIn();
            $('#goBackDiv').fadeIn() ;
    })
    $('#goBack').bind('click', function(){
        $('#infoSlector > div').fadeOut() ;
        $('#ServicesContent').fadeIn();
    })
  });

This #goBack id is a button that will show up whenever i click whatever button. and will fade out whatever just fade in.

This works fine but this is not exactly how I would like it. I happens to show both DIVS at a particular time. so you can see one above the other one at some point between the fadings.

I found that delaying the first fading is what would create the desired effect. Now it would look like this:

$(document).ready(function(){
        $('#motoBttn').bind('click', function(){
            $('#ServicesContent').fadeOut().delay(800, function (){
                $('#infoSlector').fadeIn();
                $('#motoDescContent').fadeIn();
                $('#goBackDiv').fadeIn() ;

            });

        })

        $('#goBack').bind('click', function(){
            $('#infoSlector > div').fadeOut() ;
            $('#ServicesContent').fadeIn();
        })
      });

But whenever i click the "goBack" button, it fades itself out but is doesn show the first table had on the DOM.

this is how the HTML looks like:

<table id='ServicesContent'>
                <tr>
                    <td class='ServicesIcon'>
                         <img src="images/icon3.png" alt="" />

                    </td>
                </tr>
                <tr>
                    <td class='ServicesPreviewTitle'>
                        <h2>Venta de equipo motorola</h2>

                    </td>
                </tr>
                <tr>
                    <td class='ServicesPreviewContent'>
                        <p>Ceosdach es distribuidor autorizado Motorola. Tenemos todo en radiocomunicación.</p>
                    </td>
                <tr>
                    <td class='ServicesButton'>
                        <button class ="srvcViewBttn" id="motoBttn">Ver Oferta</button>

                    </td>
            </table>
                <div id="infoSlector"class="hidden" >
                    <div id="motoDescContent" class="hidden">
                        <div class= "wholewidhtcontent">
                            <h1>Venta de equipo motorola</h1>
                        </div>
                    </div>
                    <div id="goBackDiv" class="hidden">
                        <div class= "wholewidhtcontent">
                            <button class ="srvcViewBttn" id="goBack">Atrás</button>
                        </div>
                    </div>

                </div>