Javascript 悬停淡入不使用CSS

我在我的公文包网站上工作，在作品页面上，我有一个类似pinterest的砖石布局，上面有我的一些作品的图片。在图像悬停时，我使用css显示一个标题框，这和预期的效果一样。但是，我希望图像淡入淡出，而不使标题框出现故障，并且当我在图像上添加悬停淡出时，无论是通过CSS还是javascript/jquery，它都只能在第一行图像上正常工作。或者更确切地说，它可以在所有行上正常工作，但它会在除第一行之外的任何行上断开标题框。这显然是由于我使用的行造成的，因为如果我将css更改为只有一行，它将按预期工作

以下是其中一个图像面板的代码：

<div class="panel panel-primary work-panel image text-center">
  <script id="metamorph-29-end" type="text/x-placeholder"></script>
    <div class="panel-image hide-panel-body hide-panel-footer">
  <div class="img-wrap">
      <img src="./imgs/abstract-realism.jpg" data-bindattr-1="1" class="panel-image-preview">
  <div class="img-overlay">
  <h4><script id="metamorph-30-start" type="text/x-placeholder"></script>Abstract Reality<script id="metamorph-30-end" type="text/x-placeholder"></script></h4>
      <p><script id="metamorph-31-start" type="text/x-placeholder"></script>This piece was completed during my studies at the Art Institute of Virginia Beach. The drawing was done in colored chalk and conte on paper.<script id="metamorph-31-end" type="text/x-placeholder"></script></p>
  </div>
  </div>
    </div>
    <div class="panel-body">
      <h4><script id="metamorph-32-start" type="text/x-placeholder"></script>Abstract Reality<script id="metamorph-32-end" type="text/x-placeholder"></script></h4>
      <p><script id="metamorph-33-start" type="text/x-placeholder"></script>This piece was completed during my studies at the Art Institute of Virginia Beach. The drawing was done in colored chalk and conte on paper.<script id="metamorph-33-end" type="text/x-placeholder"></script></p>
    </div>
  </div>

下面是控制淡入淡出的ember视图上的jquery（该函数以$（'.img wrap'）开头）：

您可以在此处找到仅带有标题的works页面（以显示其自身工作）：

这就是我添加淡入图像时发生的情况：

---

正如您所看到的，它在第一行上的效果与预期一样，但仅此而已。也许这是我需要在ember.js级别上纠正的问题？我已经尝试通过css通过jquery或一个通过jquery，另一个通过css添加淡入淡出和注释框，但在所有行上都没有任何效果。我被卡住了，请帮助。

好吧，如果我理解得很好，您尝试在项目悬停时制作淡入/淡出动画

目前，您正在添加一个类，该类在悬停时提供额外的样式。您最好只使用CSS来实现这一点（因此它比javascript事件更易于管理）

例如：

.panel-image img.panel-image-preview {
  width: 100%;
  border-radius: 2px 2px 0px 0px;
  transition: opacity .2s ease-in-out; /* you may use prefixes */ 
}
.panel-image:hover img.panel-image-preview {
  opacity: .5;
}
.panel-image .img-overlay {
  background-color: #000;

bottom: 0;
color: #fff;
opacity: 0;
filter: alpha(opacity = 0);
position: absolute;
width: 100%;
z-index: 9999;
  transition: opacity .2s ease-in-out; /* you may use prefixes */
}
 .panel-image:hover .img-overlay {
  opacity: 1;
}

我只是在需要在hover上进行转换的元素上添加了转换，并在hover上进行了样式修改（而不是在用javascript添加的类上）。因此您必须从JS代码中删除类切换

更新： 您显然遇到了Chrome bug。这里有一个解决方法：

.img-wrap {
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0,0,0); /* this will do the job */
}

请注意，这只是一种变通方法

---

尽管如此，我还是强烈建议使用完整的CSS解决方案：更平滑，而且处理和维护起来肯定会更容易。

你能在这里发布一些相关代码吗？还是比查看所有网站代码更好…即使使用这些代码，它仍然只在第一行正常工作。我曾经尝试过只使用CSS和wi进行淡入淡出和标题只有jquery。我现在使用的jquery只是我最后一次尝试，我已经尝试了jquery和css中的每一个组合和功能，但我知道这些组合和功能在淡入淡出和标题下无法正常工作。如果你现在查看works页面（）你可以看到使用纯cssI的结果，我猜这是Chrome的一个渲染错误。在Firefox中尝试，仅CSS的版本运行良好且平滑。我将尝试对此提供一个小的修复。成功了！非常感谢！顺便说一句，我查看了你的网站，你在phenomenal中的工作，希望有一天会如此出色。再次感谢！非常感谢，但是，好吧……这是我的job:）

.panel-image img.panel-image-preview {
  width: 100%;
  border-radius: 2px 2px 0px 0px;
  transition: opacity .2s ease-in-out; /* you may use prefixes */ 
}
.panel-image:hover img.panel-image-preview {
  opacity: .5;
}
.panel-image .img-overlay {
  background-color: #000;

bottom: 0;
color: #fff;
opacity: 0;
filter: alpha(opacity = 0);
position: absolute;
width: 100%;
z-index: 9999;
  transition: opacity .2s ease-in-out; /* you may use prefixes */
}
 .panel-image:hover .img-overlay {
  opacity: 1;
}

.img-wrap {
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0,0,0); /* this will do the job */
}