JQuery hover slideDown и fadeOut

Question

Css на коде работает нормально, но функция jquery не работает все, что мне нужно, когда мышь нависает над div, скрытый div в том, что div должен slideDown, и когда он уходит, он должен 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> 

Это 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; 
} 

и JQuery

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

Jsfiddle

Answer 1

Попробуйте

$(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

Пожалуйста, добавьте Jquery версию в JS Fiddle "Frameworks & Extensions". Ваш код работает нормально.