Fundir una tabla y reemplazar con otra usando jquery?

He encontrado algunos temas similares aquí buscando pero no he podido adaptarlos a mi situación exacta. Tengo un sitio web simple de una sola página (bueno, quiero que sea una sola página) con cinco hipervínculos cerca de la parte superior. Tengo cinco tablas diferentes para mostrar para cada enlace y en lugar de crear una página nueva para cada tabla y usar enlaces regulares a ellas, pensé que sería bueno desvanecer una tabla y desvanecer a las demás en la misma página, dependiendo de qué enlace se hace clic obviamente.

Entonces, la página predeterminada tendría el navegador en la parte superior:

Table 1 Table 2 Table 3 Table 4 Table 5 

Entonces, de forma predeterminada, la tabla 1 se mostraría en la página:

 
foo
bar

Y las otras cuatro mesas estarían ocultas. Luego, si se hace clic en el enlace a la tabla 2, la tabla 1 se desvanece y la tabla 2 se desvanece, lo mismo para las otras cuatro tablas / enlaces

Entonces la pregunta es, ¿qué jQuery necesito para esto? Sé que necesito usar fadein / out y replaceWith pero no he tenido éxito tratando de modificar algunos otros ejemplos que he encontrado aquí. Se apreciarán algunos ejemplos específicos con múltiples tablas.

    No reinvente la rueda, use algo como jQuery UI. Vea el ejemplo de Effect aquí: http://jqueryui.com/effect/ . Tenga en cuenta que hay varios efectos diferentes que puede hacer por usted. Después de encontrar el efecto que te gusta, puedes hacer clic en el enlace ‘ver fuente’ para tomar el código.

     < !DOCTYPE html>         Table 1 Table 2 Table 3 Table 4 Table 5 
    foo
    bar
    foo 2
    bar 2
    foo 3
    bar 3
    foo 4
    bar 4
    foo 5
    bar 5

    En primer lugar, no es una buena práctica utilizar el mismo identificador en diferentes elementos HTML:

     Table 1` `

    debe configurar un evento click en la navegación o especificar manejadores explícitamente como atributos:

     Table 1 

    y luego define el controlador:

     function ShowTable(number) { //fade out table that is shown $('table:visible').fadeOut('slow',function (){ $('#table'+number).fadeIn('slow'); }); } 

    EDITADO: haga que el navegador espere hasta que la tabla visible se desvanezca antes de comenzar a desvanecerse en la otra tabla

    Simplemente cambie slideDown a fadeIn y slideUp a fadeOut.

     < !DOCTYPE html>         Table 1 Table 2 Table 3 Table 4 Table 5 
    foo
    bar
    foo 2
    bar 2
    foo 3
    bar 3
    foo 4
    bar 4
    foo 5
    bar 5