jQuery - грубый fadeIn переход на зависание

Question

У меня есть div с некоторым содержимым, а затем на hover Я пытаюсь FadeIn другой пролет над ним, а fadding из 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; 
}