menu hide e show com animação

[LuHciAno 0]

Galera bom dia, estou ainda na luta para aprender Jquery e gostaria de pedir pra vocês um help!!

Preciso fazer esse "menu" seguinte: http://www.bootply.com/XUXYrEbKpm

cada imagem dessa vai mudar o conteúdo que está na lateral, no caso tem esse conteúdo inicial "index" e quando clicar por exemplo na cabeça ira mudar para outra div que estará oculta.

Já consigo fazer ele trocando, mais não sei como fazer para que quando a pessoa clicar fora em em qualquer outro canto do cenario volte para index.

Alguém poderia me da esse help ai? algum tutorial? alguma dica ou até mesmo se alguém tiver esse script facil poderia posta-lo?

gostaria que quando trocar de div fizesse um fade!

Obrigado.

 

[Diéssica 140]

.

 

Bom dia!

 

Para o efeito fade com jQuery, apenas substitua [inline]hide()[/inline] e [inline]show()[/inline] por [inline]fadeOut()[/inline] e [inline]fadeIn()[/inline], respectivamente.

 

Para fazer o clique em qualquer outro lugar do site voltar para o index, tu podes fazer algo como isso:

$('html').click(function() {  // ação de mostrar o conteúdo índice});$(seletor).click(function(event){    event.stopPropagation();});

Não esqueça de mudar o seletor.

 

Tente implementar. Caso não consiga, volte a postar. :)