Jquery hover slideDown and fadeOut

Question

The css on the code is working properly but the jquery function is not working all I need is when the mouse hovers over the div the hidden div in that div should slideDown and when it leaves it should fadeOut.

<div class="col-md-12 services-content">
   <div class="services-pannel">
       <div class="services-in">
           <div class="services-hov">Learn More</div>
           <p> <img class="padtp" src="services-preventative.png"></p>
           <h4>PREVANTATIVE</h4>
           <p>
               Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .
           </p>
           <p></p>
       </div>
   </div>
   <div class="services-pannel">
       <div class="services-in">
           <div class="services-hov">Learn More</div>
           <p> <img class="padtp" src="services-restorative.png"></p>
           <h4>RESTORATIVE</h4>
           <p>
               Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .
           </p>
           <p></p>
       </div>
   </div>
</div>

This is the css

.services-pannel{
    display:inline-block;
    width:225px;
    text-align:center;
    background-color:#a8d9e9;
    margin: 1px -1px;
    position: relative;
    height: 185px;
}
.services-in{
  position: absolute;
  width: 225px;
  height: 185px;
  cursor: pointer;
}
.padtp{padding-top: 20px;}
.services-hov{
  position: absolute;
  display: none;
  text-align: center;
  width: 225px;
  height: 185px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  padding-top: 88px;
}
.services-section-heading{
    color:#333;
    text-align:center;  
    margin-bottom:40px;
    font-size:24px;
    color:#666;
}
.heading-line-services{
    color:#666; 
}
.services-pannel p{
    font-size:0.8em;
    padding:0 20px;
}
.services-pannel h4{
    font-size:bold  ;
    color:#333;
}

and the jquery

$(function(){
    $(".services-in").mouseover(function() {
        $(".services-hov").slideDown(400);
    });
    $(".services-hov").mouseout(function() {
        $(".services-hov").fadeOut(400);
    });
});

Jsfiddle

Answer 1

Try this

$(function() {
  $(".services-in").mouseover(function(e) {
    $(this).children(".services-hov").slideDown(100);
  });
  $(".services-hov").mouseout(function(e) {
    $(".services-hov").fadeOut(500);
  });
});

.services-pannel {
  display: inline-block;
  width: 225px;
  text-align: center;
  background-color: #a8d9e9;
  margin: 1px -1px;
  position: relative;
  height: 185px;
}
.services-in {
  position: absolute;
  width: 225px;
  height: 185px;
  cursor: pointer;
}
.padtp {
  padding-top: 20px;
}
.services-hov {
  position: absolute;
  display: none;
  text-align: center;
  width: 225px;
  height: 185px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  padding-top: 88px;
}
.services-section-heading {
  color: #333;
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
  color: #666;
}
.heading-line-services {
  color: #666;
}
.services-pannel p {
  font-size: 0.8em;
  padding: 0 20px;
}
.services-pannel h4 {
  font-size: bold;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 services-content">
  <div class="services-pannel">
    <div class="services-in">
      <div class="services-hov">Learn More</div>
      <p>
        <img class="padtp" src="services-preventative.png">
      </p>
      <h4>PREVANTATIVE</h4>

      <p>Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .</p>
      <p></p>
    </div>
  </div>
  <div class="services-pannel">
    <div class="services-in">
      <div class="services-hov">Learn More</div>
      <p>
        <img class="padtp" src="services-restorative.png">
      </p>

      <h4>RESTORATIVE</h4>

      <p>Lorem ipsum dolor consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore .</p>
      <p></p>
    </div>
  </div>
</div>

Answer 2

Please add jquery version in JS Fiddle "Frameworks & Extensions". Your code is working fine.