jQuery并不总是按顺序运行

时间：2016-08-20 06:19:25

标签： jquery css drupal-7 overlay

我在drupal 7中创建了一个视图 - staff1 - 有四个响应式视图行。每行包含下面的图像和文本;我有一个覆盖层，图像和文本位置的相同高度绝对位于图像的中心。我通过jQuery这样做了。

简化版：

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


$(".red-back").css("height", imgHeight);
$(".wrapper").css("height", imgHeight).css("margin-bottom", rowHeight);
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

它有时会起作用，有时它不起作用？我有几次高度是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

    3. 使包装器等于imgHeight和margin-bottom到rowHeight。使叠加高度等于imgHeight。

    JSfiddle here

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我想知道自己做错了什么，但我还是考虑到了这个理论：

图像包装器上的

position: absolute; top: 0; bottom: 0;：在包装器之后，position: relative，并将文本移动到图像包装器的包装器：之后。

JS fiddle 

* {
  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>

相关问题
最新问题