JQuery не всегда работает в порядке

jquery css drupal-7 overlay

44 просмотра

2 ответа

Я сделал представление - staff1 - в drupal 7, у которого есть четыре отзывчивых ряда просмотра. Каждая строка содержит изображение и текст внизу; У меня есть оверлей с одинаковой высотой изображения и положением текста абсолютно в центре изображения. Я сделал это через JQuery.

Упрощенная версия:

var imgHeight = $(".img").height();
var rowHeight = $(".wrapper").height() - $(".img").height();


$(".red-back").css("height", imgHeight);
$(".wrapper").css("height", imgHeight).css("margin-bottom", rowHeight);
* {
  box-sizing: border-box;
}
img {
  max-width: 100%
}
.wrapper {
  width: 25%;
  float: left;
  position: relative;
  padding: 0 15px;
}
.img {
  display: block;
  line-height: 0;
  position: relative;
}
.red-back {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #e74c3c;
  visibility: hidden;
  opacity: 0;
}
.wrapper:hover .red-back {
  visibility: visible;
  opacity: 0.75;
}
.text {
  visibility: hidden;
  position: absolute;
  font-size: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  z-index: 5;
  opacity: 0;
  color: #333;
}
.wrapper:hover .text {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.transition {
  transition: all 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="text transition">Read Bio</div>
  <div class="img">
    <img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
    <div class="red-back transition"></div>
  </div>
  <div class="subtext">afweeawe</div>
  <div class="subText2">feweffe</div>
</div>

<div class="wrapper">
  <div class="text transition">Read Bio</div>
  <div class="img">
    <img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
    <div class="red-back transition"></div>
  </div>
  <div class="subtext">afweeawe</div>
  <div class="subText2">feweffe</div>
</div>

<div class="wrapper">
  <div class="text transition">Read Bio</div>
  <div class="img">
    <img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
    <div class="red-back transition"></div>
  </div>
  <div class="subtext">afweeawe</div>
  <div class="subText2">feweffe</div>
</div>

<div class="wrapper">
  <div class="text transition">Read Bio</div>
  <div class="img">
    <img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
    <div class="red-back transition"></div>
  </div>
  <div class="subtext">afweeawe</div>
  <div class="subText2">feweffe</div>
</div>

Иногда это работает, а иногда нет? У меня было несколько раз, когда высота была 15px, но я исправил это с помощью Angular jQuery.

Полная версия:

var imgHeight = $(".view-staff1 .views-field-colorbox img").height(); var rowHeight = $(".view-staff1 .views-row").height() - $(".view-staff1 .views-field-colorbox img").height();

$(".view-staff1 .views-row").css("height", imgHeight).css("margin-bottom", rowHeight); $(".view-staff1 .views-field-colorbox .red-back").css("height", imgHeight);

Логика:

Две переменные:

  1. imageHeight = высота изображения
  2. rowHeight = высота родительского элемента, (оболочка с изображением и текстом), минус imageHeight

Сделайте обертку равной imgHeight и margin-bottom для rowHeight. Сделайте высоту наложения равной imgHeight.

JSfiddle здесь

Проблема в том, что иногда jQuery не работает в порядке чего-либо, и я получаю imageHeight равным 0px.

Автор: Chris Happy Источник Размещён: 08.11.2019 10:57

Ответы (2)


1 плюс

Решение

Я делаю этот эффект при наведении курсора просто используя css. Нет необходимости Jquery.

Добавить position:relativeв родительский класс

.view-staff1 .views-field-colorbox {
  position: relative
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.428571429;
  color: #8f8f8f;
  background: white;
}

img {
  max-width: 100%
}

.view-staff1 .views-row {
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  padding: 0 15px 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 25%;
  float: left;
  position: relative;
}

.view-staff1 .views-field-title {
  margin: 25px 0 0;
  color: #2a2a2a;
  letter-spacing: 2px;
  text-transform: uppercase;
  font: 700 130% "Lato", Georgia, "Times New Roman", Times, serif;
}

.view-staff1 .views-field-title-1 {
  visibility: hidden;
  position: absolute;
  top: 35%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, 50%);
  z-index: 5;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}

.view-staff1 .views-row:hover .views-field-title-1 {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.view-staff1 .views-field-title-1 .fa-info:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 130%;
  /*    transition: all 0.4s ease;*/
}

.view-staff1 .views-field-title-1 .fa-info {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: #fff;
  border-color: #fff;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.view-staff1 .views-field-colorbox{
  position:relative;
}
.view-staff1 .views-field-colorbox .red-back {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; 
 // margin: 0 15px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: #e74c3c;
  visibility: hidden;
  opacity: 0; 
  height:100%;
  width:100%;
}

.view-staff1 .views-row:hover .views-field-colorbox .red-back {
  visibility: visible;
  opacity: 0.75;
 // height:100%;
}


.view-staff1 .views-field-colorbox a {
  display: block;
  line-height: 0;
}

.view-staff1 .views-field-title-1 .bio {
 // margin-left: 5px;
  font-size: 140%;
  position: relative;
 // -webkit-transform: translate(0, -50%);
 // transform: translate(0, -50%);
  display: inline-block;
//  -webkit-transition: all 0.4s;
//  transition: all 0.4s;
  color: #fff;
  vertical-align:middle
}

.view-staff1 .views-field-title-1 .bio:after {
  content: "";
  height: 2px;
  margin-top: 2px;
  position: absolute;
  -webkit-transition: all .2s;
  transition: all .2s;
  width: 0;
  bottom: -2px;
  background: #9E251B;
  left: 0;
}

.view-staff1 .views-field-title-1.hover .bio:after {
  width: 100%;
}
<div class="view-staff1">


  <div class="views-row">
    <div class="views-field views-field-title-1">
      <span class="field-content">
          <div class="bio">Read Bio</div></span> </div>
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                  <div class="red-back"></div>
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>

  <div class="views-row">
    <div class="views-field views-field-title-1">
      <span class="field-content">
          <div class="bio">Read Bio</div></span> </div>
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                  <div class="red-back"></div>
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>

  <div class="views-row">
    <div class="views-field views-field-title-1">
      <span class="field-content">
          <div class="bio">Read Bio</div></span> </div>
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                  <div class="red-back"></div>
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>

  <div class="views-row">
    <div class="views-field views-field-title-1">
      <span class="field-content">
          <div class="bio">Read Bio</div></span> </div>
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                  <div class="red-back"></div>
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>
</div>

Автор: Minal Chauhan Размещён: 20.08.2016 06:55

0 плюса

Я хотел бы знать, что я сделал не так, но я начал работать с этой теорией:

position: absolute; top: 0; bottom: 0;на обертке изображения: after, position: relativeна обертке, а также переместите текст в обертку image-wrapper: after.

JS скрипка

* {
  box-sizing: border-box;
}
body {
  font-family: 'Lato', Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.428571429;
  color: #8f8f8f;
  background: white;
}
img {
  max-width: 100%
}
.view-staff1 .views-row {
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  padding: 0 15px 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 25%;
  float: left;
  position: relative;
}
.view-staff1 .views-field-title {
  margin: 25px 0 0;
  color: #2a2a2a;
  letter-spacing: 2px;
  text-transform: uppercase;
  font: 700 130%"Lato", Georgia, "Times New Roman", Times, serif;
}
.view-staff1 .views-field-title-1 {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  z-index: 5;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.view-staff1 .views-row:hover .views-field-title-1 {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.view-staff1 .views-field-colorbox {
  position: relative
}
.view-staff1 .views-field-colorbox a {
  line-height: 0;
  display: block;
}
.view-staff1 .views-field-colorbox a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: #e74c3c;
  visibility: hidden;
  opacity: 0;
}
.view-staff1 .views-row:hover .views-field-colorbox a:after {
  visibility: visible;
  opacity: 0.75;
}
.view-staff1 .views-field-colorbox .field-content:after {
  content: "Read More";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 140%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, 150%);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  color: #fff;
  opacity: 0;
}
.view-staff1 .views-row:hover .views-field-colorbox .field-content:after {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
<div class="view-staff1">

  <div class="views-row">
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>
  <div class="views-row">
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>
  <div class="views-row">
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>
  <div class="views-row">
    <div class="views-field views-field-colorbox">
      <span class="field-content">
                <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-staff1">
                  <img typeof="foaf:Image" class="image-style-simple-crop" src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
                </a>
          </span>
    </div>
    <div class="views-field views-field-title">
      <span class="field-content">afweeawe</span>
    </div>
    <div class="views-field views-field-field-title">
      <div class="field-content">feweffe</div>
    </div>
  </div>
</div>

Автор: Chris Happy Размещён: 20.08.2016 06:56
Вопросы из категории :
32x32