Bug with jquery slide effect

I am developing a button that when passing the mouse presents a slideDown effect. I made an example of jsfiddle: link

When you hover the mouse once the expected effect is executed, however, if you mouse over the button several times (without waiting for the effect to finish), the effect will repeat the same effect several times causing a poor user experience.

I'm looking for the best way to do this button.

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();
        });
    });
});