jquery - jQuery - 悬停时的粗略淡入过渡

Question

我有一个包含一些内容的 div，然后在悬停时我试图在它上面淡入另一个跨度，同时淡出容器 div。悬停后的问题容器 div 变为不透明度 0 然后返回到我设置的值。感觉像是在眨眼。我需要平稳。
这是我的代码：

现场 JSFiddle：http: //jsfiddle.net/alok108/Y7hgs/28/

HTML

<div class="campaign-box">
    <a href="#"class="like-box"> 
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            <span>34234983-80</span>
        </div>    
        <span> </span>
    </a>
</div>

jQuery

$(function () {
    $(".campaign-box span:last").hide();
    $(".campaign-box").hover(function () { 
        $(".box").css("opacity", 0.5);
        $(".campaign-box span:last").fadeIn("fast");           
    }, function () {        
        $(".box").css("opacity", 1); 
        $(".campaign-box span:last").fadeOut("slow");
    });
});

CSS

.campaign-box {
    display: block;
    height: 100px;
    width: 200px;
    border: solid black;
}
.box {
    display:block;
    height:100%;
    width:100%;
    float:left;
}
.box + span {
    display: block;
    height:100%;
    width:100%;
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat;
    z-index:5;
}

Answer 1

只需添加位置：相对；除非设置了静态以外的某种位置，否则 z-index 不会做任何事情。

.box + span {
    display: block;
    height:100%;
    width:100%;
    position: relative;
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat;
    z-index:5;
}