Question

有人可以查看我的代码吗？它假设要做的是使用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

<div class="social-media">
    <a title="Share On Twitter" href="#">
         <img alt="" src="images/icon_twitter.png" />
         <img class="test" alt="" src="images/icon_twitter_active.png" />
</a>
</div>

CSS

.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; 
}

Answer 1

您应该使用<img>而不是隐藏第二个display: none元素，而不使用不透明度：

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

http://jsfiddle.net/8vH4E/

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

更新：由于OP询问是否可以使用CSS，我修改了小提琴以排除使用JS并简单地依赖CSS和伪元素的使用：{{ 3}}

.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;
}

我的策略很简单：

请改用背景图片。对于大小调整，我使用了cover，但您可以自由使用任何大小调整（绝对像素/点大小，相对百分比大小或动态计算的大小，如cover，contain）
对于悬停状态，使用覆盖整个<a>的绝对定位的伪元素（通过绝对定位并且从所有四个方向偏移零）。我们不需要伪元素上的指针事件，因此我们将其设置为pointer-events: none
当<a>元素悬停在其上（以:hover选择器为目标）时，我们会将伪元素的不透明度从0切换为1。我们在伪元素上声明transition属性，以允许平滑，浏览器计算和JS无关的转换。

Answer 2

精灵很好，但没有给出平滑的褪色动画（认为这是主要原因， KDM ，不是吗？）。

因此，让我们修复现有代码：

因为fadeOut()将元素转换为display: none;状态，因为fadeIn()在元素为display: none;时开始工作。因此，让我们先在display: none;中转换第二张图片;
我们可以省略两个图像的不透明度（默认依赖于1.0）; $.fadeIn/Out()使用CSS中的不透明度作为动画的起点/终点。当然，如果以这种方式设计，您可以为每个图像明确设置不透明度;

display: inlibe-block;

<a>是个好点，因为它包含可能可以消失的内联元素（display: none;）;这会导致整个<a>消失，mouseleave事件会因意外的UI错误而触发。

享受http://jsfiddle.net/8vH4E/1/并感谢 Terry 作为小提琴：）

fadeIn不在nth-child上工作（2）

2 个答案: