Плавный переход при смене класса
Здравствуйте. Необходимо сделать чтобы переход был плавным. При добавлении и удалении класса .active . появляется и скрывается блок. Подскажите плиз решение.
(function($) {
$(function() {
$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
$(this)
.addClass('active').siblings().removeClass('active')
.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
});
});
})(jQuery);
.tabs {
width: 100%;
height: 40px;
margin: 30px auto;
display: block;
}
.tabs__caption {
height: 0px;
font-family: 'Roboto',Verdana,Helvetica,Arial,sans-serif;
font-size: 1.2em;
line-height: 39px;
list-style: none;
margin: -90px 0px 0px;
z-index:1;
padding-left: 0px;
}
.tabs__caption li {
float: left;
display: inline;
padding: 0 30px 1px;
color: #A80000;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
line-height: 30px;
}
.tabs__caption li:hover{
color: #F70;
background: #FFFFDF;
border-top: 1px solid #FFCA95;
border-left: 1px solid #FFCA95;
border-right: 1px solid #FFCA95;
line-height: 30px;
}
.tabs__caption .active {
color: #FFF;
background: rgb(255, 0, 0) none repeat scroll 0% 0%;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #EFEFEF;
line-height: 30px;
}
.tabs__content {
display: none;
width: 100%;
margin-top: 8px;
}
.tabs__content.active {
display: block;
}
<div class="tabs">
<ul class="tabs__caption">
<li class="active">Пункт 1</li><li class="">Пункт 2</li><li class="">Пункт 3</li>
</ul>
<div class="tabs__content active">
<div class="left"> </div>
</div>
<div class="tabs__content">
<div class="сenter"> </div>
</div>
<div class="tabs__content">
<div class="right"></div>
</div>
</div>
|
serggrodno,
информации недостаточно ... может вам css нужно настроить а не код, и смотрите в сторону типа .slideToggle(). для помощи вам нужен полноценный но лаконичный макет |
serggrodno,
на всякий случай забейте слово открывашка в поиск по форуму думаю это то что вам нужно. |
serggrodno,
а html? |
Открывашка 252 ...
serggrodno,
пара сотен открывашка может тоже самое http://javascript.ru/forum/dom-windo...tml#post385057
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #D2691E;
}
.tabs {
width: 100%;
height: 40px;
margin: 30px auto;
display: block;
}
.tabs__caption {
font-family: 'Roboto',Verdana,Helvetica,Arial,sans-serif;
font-size: 1.2em;
line-height: 39px;
list-style: none;
padding: 0;
margin: 0;
}
.tabs__caption li {
width: 100px;
display: inline;
padding: 0 30px 1px;
color: #A80000;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
line-height: 30px;
}
.tabs__caption li:hover{
color: #F70;
background: #FFFFDF;
border-top: 1px solid #FFCA95;
border-left: 1px solid #FFCA95;
border-right: 1px solid #FFCA95;
line-height: 30px;
}
.tabs__caption .active {
color: #FFF;
background: rgb(255, 0, 0) none repeat scroll 0% 0%;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #EFEFEF;
line-height: 30px;
}
.tabs__content {
display: none;
width: 100%;
height: 200px;
background-color: #FF1493;
}
.tabs__content.active {
display: block;
}
.tabs__content:nth-child(2){
background-color: #0000FF;
}
.tabs__content:nth-child(3){
background-color: #FFFF00;
} </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$(function() {
$('.tabs').on('click', 'li', function(event) {
$(this).addClass('active').siblings().removeClass('active');
$('div.tabs__content', event.delegateTarget).not($('div.tabs__content', event.delegateTarget).eq($(this).index()).fadeIn()).hide();
});
});
})(jQuery);
</script>
</head>
<body>
<div class="tabs">
<ul class="tabs__caption">
<li class="active">Пункт 1</li><li class="">Пункт 2</li><li class="">Пункт 3</li>
</ul>
<div class="tabs__content active">
<div class="left">1 </div>
</div>
<div class="tabs__content">
<div class="сenter">2 </div>
</div>
<div class="tabs__content">
<div class="right">3</div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:31. |