jQuery 并不总是按顺序运行

Question

我在 drupal 7 中制作了一个 View — staff1 — 有四个响应式 View 行。每行下方包含一个图像和文本；我有一个完全位于图像中心的图像和文本位置相同高度的叠加层。我是通过 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

使 wrapper 等于 imgHeight，margin-bottom 等于 rowHeight。使覆盖高度等于 imgHeight。

JSfiddle here

问题是有时 jQuery 不按顺序运行，我得到 imageHeight 等于 0px。

Answer 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>