JQuery: Can not fade in <span> Элемент

Question

У меня есть элемент span, который я хочу, чтобы вывести из дисплея ни одного. выведении работает прекрасно, но Исчезновение всего не работает,

Вот CSS элемента SPAN:

$(".button_5").hover(function() { 
 
     $(".box5 span.info").fadeIn(); 
 
    }); 
 

 
//The fade out just works fine: 
 

 
    $(".button_5").hover(function() { 
 
     $(".box5 span.info").fadeOut(); 
 
    });

.box5 span.info:before{ 
 
     content:"15 vacatures"; 
 
     margin:0; 
 
     padding:0 0 28px 0; 
 
     display:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="col1"> 
 
     <div class="button_5"> 
 
      <div class="box5"> 
 
       <br><br> 
 
       <span class="title"></span><br/> 
 
       <span class="info"></span> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

Может быть, вы ищете что-то вроде

$(".button_5").hover(function() { 
    $(".box5 span.info").fadeToggle(); 
}); 

http://jsfiddle.net/oqfhuLzn/2/

Answer 2

Вы должны добавить display: none в свой span.info элемент, для того, чтобы исчезнуть в ...

http://jsfiddle.net/oqfhuLzn/3/

.box5 span.info { 
    display: none; 
} 

Answer 3

Ваш код работает, если вы удалите :before и изменить display: 0 к display:none;

Взгляните на эту скрипку http://jsfiddle.net/qxu1gnme/1/

Answer 4

$(".button_5").hover(function() { 
    $(".box5 span.info").fadeIn(); 
}, function() { 
    $(".box5 span.info").fadeOut(); 
}); 

Демонстрация: http://jsfiddle.net/moogs/19ykuar2/2/