文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >jQuery并不总是按顺序运行

问jQuery并不总是按顺序运行
EN

Stack Overflow用户
提问于 2016-08-20 06:19:25
回答 2查看 48关注 0票数 0

我在drupal 7中创建了一个视图staff1，它有四个响应性视图行。每一行下面都包含一个图像和文本；我有一个重叠，图像的高度和文本的位置完全在图像的中心。我是通过jQuery这么做的。

简化版本：

​

代码语言：javascript
复制
var imgHeight = $(".img").height();
var rowHeight = $(".wrapper").height() - $(".img").height();


$(".red-back").css("height", imgHeight);
$(".wrapper").css("height", imgHeight).css("margin-bottom", rowHeight);
代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<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>

​

有时起作用，有时不行？我有几次的高度是15 is，但固定的角度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，使边底等于rowHeight.使叠加高度等于imgHeight。

JSfiddle在这里

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

jquery
css
drupal-7
overlay
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-20 06:55:42

我是做这个悬停效果只是使用css。不需要Jquery。

将position:relative添加到父类

代码语言：javascript
复制
.view-staff1 .views-field-colorbox {
  position: relative
}

​

代码语言：javascript
复制
* {
  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%;
}
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2016-08-20 06:56:02

我想知道我做错了什么，但我想到了这个理论：

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

JS小提琴

​

代码语言：javascript
复制
* {
  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%);
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39051109

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档