misterX_,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.blockA {
position: absolute;
width: 980px;
height: 600px;
line-height: 150px;
text-align: center;
color: #FFF;
opacity: 1;
left: 0px;
}
.blockB {
left: -980px;
position: absolute;
width: 980px;
height: 600px;
line-height: 150px;
text-align: center;
color: #FFF;
opacity: 1;
overflow: hidden;
}
.blockA {
background: #060;
}
.blockB {
background: #036;
}
.showA , .showB {
display: inline-block;
padding: 10px;
}
.part {
float: left;
margin-right: 50px;
position: relative;
width: 980px;
height: 600px;
overflow: hidden;
}
.active {
margin: 0;
z-index: 10;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
var blocks = $('.part div');
blocks.click(function()
{
blocks.stop().not(this).css({left: '-980px'}).animate(
{
left: '0px'
},2000
)
$(this).animate(
{
left: '980px'
},2000
);
}
);
}
);
</script>
</head>
<body>
<div class="part">
<div class="blockA">Блок А</div>
<div class="blockB">Блок Б</div>
</div>
</body>
</html>