Помогите разобраться с функцией .height()
Ребят, помогите разобраться с функцией .height(). Есть три блока с заголовками и описаниями.
Описания по умолчанию скрыты, при наведении показываются. Не могу добиться, чтобы заголовки, которые имеют разную высоту полностью отображались в блоке. Получается, что скрипт использует только значение высоты первого заголовка и соотв. во втором заголовке, имеющем три строки, отображается только первая строка. Знаю, что в скрипте непростительный косяк, но устал уже с ним биться. Помогите пожалуйста! https://jsfiddle.net/3az455s8/3/ |
kos0760,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.service-item{
background:#333;
color:#eee;
width:240px;
height:300px;
float:left;
margin-right:20px;
position:relative;
overflow:hidden;
cursor:pointer;
}
.content{
position:absolute;
top:0px;
padding:0 15px;
transition: all .6s ease-out;
}
.service-item:hover .content{
top:0!important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.service-item').each(function(i,el){
var heighttitle = $('h3',el).outerHeight(true);
var height = $(el).height();
var top = height - heighttitle;
$('.content',el).css({'top': top});
});
});
</script>
</head>
<body>
<div class="service-list">
<div class="service-item">
<div class="content">
<h3>Заголовок№1</h3>
<div class="descr">Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий позволяет оценить значение модели развития. Значимость этих проблем настолько очевидна, что сложившаяся структура организации требуют от нас анализа существенных финансовых и административных условий.</div>
</div>
</div>
<div class="service-item">
<div class="content">
<h3>Очень большой-большой заголовок в три строки№2</h3>
<div class="descr">Задача организации, в особенности же дальнейшее развитие различных форм деятельности способствует подготовки и реализации существенных финансовых и административных условий.</div>
</div>
</div>
<div class="service-item">
<div class="content">
<h3>Заголовок№3</h3>
<div class="descr">Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития.</div>
</div>
</div>
</div>
</body>
</html>
|
Большое спасибо!
|
| Часовой пояс GMT +3, время: 10:38. |