ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tab-in_1.zoomIn {
height: 100px;
background: #FFCC00;
}
.animated {
transition: all 1s ease-in-out;
}
.tab-in_1 {
height: 0px;
overflow: hidden;
}
.tab-img {
margin-left: -400px;
}
.tab-img.animated {
transition: all 1s ease-in-out;
}
.tab-img.zoomIn {
margin-left: 0px;
}
body>div{
position: absolute;
top:150px;
}
body{
position: relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function()
{
$('.tab').on('click', function(event)
{
event.preventDefault();
var id = this.getAttribute('href')
$('.tab-in_1, .tab-img').not($('.tab-in_1, .tab-img', id).toggleClass('zoomIn')).removeClass('zoomIn')
}
);
}
);
</script>
</head>
<body>
<ul>
<li>
<a class="tab" href="#tab-mus">Музыка</a>
</li>
<li>
<a class="tab" href="#tab-bis">Бизнесс</a>
</li>
<li>
<a class="tab" href="#tab-pol">Политика</a>
</li>
<li>
<a class="tab" href="#tab-mov">Кино</a>
</li>
</ul>
<div id="tab-mus"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<div class="tab-in_1 animated">
Музыка
</div>
</div>
<div id="tab-pol"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<div class="tab-in_1 animated">
Политика
</div>
</div>
<div id="tab-mov"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<div class="tab-in_1 animated">
Кино
</div>
</div>
<div id="tab-bis"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
<div class="tab-in_1 animated">
Бизнесс
</div>
</div>
</body>
</html>
