Форум

kos0760 · #1 (**permalink**) 24.05.2017, 23:13

Ребят, помогите разобраться с функцией .height(). Есть три блока с заголовками и описаниями.

Описания по умолчанию скрыты, при наведении показываются. Не могу добиться, чтобы заголовки, которые имеют разную высоту полностью отображались в блоке. Получается, что скрипт использует только значение высоты первого заголовка и соотв. во втором заголовке, имеющем три строки, отображается только первая строка.

Знаю, что в скрипте непростительный косяк, но устал уже с ним биться.

Помогите пожалуйста!

https://jsfiddle.net/3az455s8/3/

рони · #2 (**permalink**) 24.05.2017, 23:32

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>

kos0760 · #3 (**permalink**) 24.05.2017, 23:51

Большое спасибо!

Форум

Справочник

Discord чат

Курсы javascript