Rustam123,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.par > div:nth-child(n+2) {
opacity: 0
}
.par > div{
position: absolute;
}
.par {
position: relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var links = $('.obrashenie li a'), blocks = $('.par > div');
links.click(function(event){
event.preventDefault()
var indx = links.index(this);
blocks.stop(true,true).not(blocks.eq(indx).animate({opacity: 1})).animate({opacity: 0});
});
});
</script>
</head>
<body>
<div class="col-md-2 pan">
<nav>
<div class="">
<img class="logo" src="img/Logo.png">
</div>
<ul id="navigation" class="obrashenie">
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#about">О ПРОЕКТЕ</a></li>
<li><a href="#" class="hovertrigger">КАК УЧАВСТВОВАТЬ</a></li>
</ul>
</nav>
</div>
<!-- Контейнер в котором отоброжается основная информация -->
<div class="col-md-10 containersinf">
<div class="par">
<div class="blockA">ГЛАВНАЯ</div>
<div class="blockB">О ПРОЕКТЕ</div>
<div class="blockC">КАК УЧАВСТВОВАТЬ</div>
</div>
</div>
</body>
</html>