Javascript fadeIn不处理第n个孩子（2）

有人能看看我的密码吗。它要做的是使用fadeIn和fadeOut设置img标签的动画，但是它只会淡出第一个img，而不会在第二个img中淡出。我认为我的css可能是错误的，这就是为什么第二张图片没有显示我没有收到任何错误

它是另一个图像之上的图像

jQuery

$(document).ready(function() {
    $('.social-media a').on('mouseenter', function(e) {
        $(this).find("img:nth-child(2)").fadeIn();
        $(this).find("img:nth-child(1)").fadeOut()
    });
})

HTML

---

不应使用零不透明度隐藏第二个

元素，而应使用

display:none

：

.social-media a img:nth-child(2) {
    position: absolute;
    left: 0; top: -33px;
    display: none;
    z-index: 2; 
}

然而，我强烈建议使用一个简单的CSS图像精灵来实现这个效果，它不需要JS

---

更新：自从OP询问是否可以使用CSS后，我修改了Fiddle以排除JS的使用，并简单地依赖CSS和伪元素的使用：

我的策略很简单：

• 改用背景图像。对于大小调整，我使用了

  封面

  ，但您可以自由使用任何大小调整（绝对像素/点大小、相对百分比大小或动态计算的大小，如

  封面

  ，

  包含

  ）
• 对于悬停状态，使用覆盖整个
  的绝对定位伪元素（通过绝对定位并从所有四个方向零偏移）。伪元素上不需要指针事件，因此我们将其设置为

  pointer events:none

• 当
  元素悬停时（以

  ：hover

  选择器为目标），我们将伪元素的不透明度从

  0

  切换到

  1

  。我们在伪元素上声明transition属性，以允许平滑、浏览器计算和JS不可知的转换

---

精灵不错，但不会产生平滑的褪色动画（你认为这是主要原因，KDM，不是吗？）
因此，让我们修复现有代码：
• 当

  fadeOut（）

  将元素转到

  显示时：无状态，当元素显示为“无”时，
  fadeIn（）
  开始工作。因此，让我们打开
  显示中的第二个图像：无第一
  

• 我们可以忽略两幅图像的不透明度（默认值为1.0）

  $.fadeIn/Out（）

  使用CSS中的不透明度作为动画的起点/终点。当然，如果以这种方式设计，您可以为每个图像显式设置不透明度

---

• 显示：inlibe块 <代码>，感谢<>特里> <强> >小提琴：
  你应该考虑使用CSS精灵…这会不会使实现变得更容易，也更具语义意义？如果我要做一个精灵，如果你能给我一个例子，使用伪元素，你如何实现fadeIn和fadeOut效果。。。这应该很直截了当。另外，您是否希望图像交叉淡入淡出？@KDM更新了我的答案：）请参阅纯CSS解决方案：D
  .social-media {
      padding-top: 20px; 
      width: 166px; 
      margin: 0 auto 10px auto;
  }
  .social-media a {
      position: relative;
      width: 55px;
      height: 51px;
  }
  .social-media a img:nth-child(1) {
      opacity: 1;
  }
  .social-media a img:nth-child(2) {
      position: absolute;
      left: 0; top: -33px;
      opacity: 0;
      z-index: 2; 
  }
  
  .social-media a img:nth-child(2) {
      position: absolute;
      left: 0; top: -33px;
      display: none;
      z-index: 2; 
  }
  
  .social-media a {
      display: block;
      position: relative;
      width: 100px;
      height: 100px;
      background-image: url(http://placehold.it/200x200);
      background-size: cover;
  }
  .social-media a::before {
      background-image: url(http://placehold.it/200x200/4a7298/eeeeee);
      background-size: cover;
      content: '';
      display: block;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      -webkit-transition: all .25s ease-in-out;
      transition: all .25s ease-in-out;
  }
  .social-media a:hover::before {
      opacity: 1;
  }