Estou desenvolvendo um botão que ao se passar o mouse apresenta um efeito slideDown. Fiz um exemplo do jsfiddle: https://jsfiddle.net/xmwrrom4/
Ao passar o mouse uma vez o efeito esperado é executado, porém ao se passar o mouse várias vezes sobre o botão(sem esperar a conclusão do efeito) o efeito se repetirá várias vezes o mesmo efeito gerando um experiência ruim pro usuário.
Estou procurando a melhor forma de fazer esse botão.
HTML
<div class="cursos">
<div>
<h3>Cursos X</h3>
<hr>
<p> Total de Alunos : 32 </p>
<p> Professor : Paulo Junqueira </p>
<p> Data de Iniicio : 20/01/2016 </p>
<p> Data de Encerramento : 12/11/2017 </p>
</div>
</div>
CSS
.cursos div{
background-color: #00cc99;
width:calc(46% - 4% - 16px);
margin:2%;
float: left;
color:white;
padding: 2%;
border: 4px solid #ddd;
text-shadow: #00cc99 1px 1px 12px;
border-radius: 5px;
position:relative;
cursor:pointer;
}
.cursos p{
font-family: "open sans";
}
.cursos hr{
border: 1px solid #fff;
}
.cursos span{
background-color: rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
display:flex;
align-items:center;
justify-content: center;
display:none;
}
JS
$(document).ready(function(){
var div_h = $('.cursos div:eq(0)').innerHeight();
$('.cursos div').append('<span></i>EDITAR</span>');
$('.cursos span').css('width',$('.cursos div').innerWidth());
$('.cursos span').css('height',div_h);
$('.cursos div').on('mouseenter',function(){
$(this).find('span').slideDown();
$(this).find('span').css({'display':'flex','align-items':'center','justify-content':'center'});
$(this).on('mouseleave',function(){
$(this).find('span').slideUp();
});
});
});