$(document).ready(function(){

$('#content1').animate({width: 0, opacity: 0}, 600);
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);

$('#a1').mouseover(function(){
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 1}, 600);
});

$('#a2').click(function(){
$('#content2').animate({width: 416, opacity: 1}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 0.2}, 600);
})

$('#b2').click(function(){
$('#content2').animate({width: 416, opacity: 1}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 0.2}, 600);
})

$('#a3').click(function(){
$('#content3').animate({width: 240, opacity: 1}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 0.2}, 600);
})

$('#b3').click(function(){
$('#content3').animate({width: 240, opacity: 1}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 0.2}, 600);
})

$('a#a4').click(function(){
$('#content4').animate({width: 500, opacity: 1}, 600);
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
})

$('a.close').click(function(){
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 1}, 600);
})

$('#corpo').mouseover(function(){
$('#content1').animate({width: 0, opacity: 0}, 600);
$('#content2').animate({width: 0, opacity: 0}, 600);
$('#content3').animate({width: 0, opacity: 0}, 600);
$('#content4').animate({width: 0, opacity: 0}, 600);
$('#a1').animate({opacity: 1}, 600);
})

});