Если указать высоту блока в пикселях, то анимация выполняется плавно, но если высота задана в процентах, то нужный блок резко увеличивается без анимации.
P.s. Анимация должна выполняться по клику на блок
function gradient(obj) {
if ($(obj).hasClass('phoneRegistry')) {
$(obj).removeClass('phoneRegistry');
$(obj).addClass('phoneRegistry2');
$(obj).animate({height: '100%'}, 150);
} else {
$(obj).removeClass('phoneRegistry2');
$(obj).animate({height: 100}, 150, function () {
$(obj).addClass('phoneRegistry');
});
}
}
.phoneRegistry {
height: 100px;
overflow: hidden;
margin-top: -20px;
}
.phoneRegistry:before {
content: "";
display: block;
height: 20px;
position: relative;
top: 80px;
background-image: linear-gradient(to bottom, transparent, #fff 75%)
}
.phoneRegistry2 {
height: 80px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="phoneRegistry" style="width: 150px;" onclick="gradient(this)">
<strong>
Регистратура
<br>
</strong>
Строка1
<br>
Строка2
<br>
Строка3
<br>
Строка4
<br>
Строка5
<br>
Строка6
<br>
Строка7
<br>
Строка8
</div>