Bug with slide jquery effect

Question

I am developing a button that when passing the mouse has a slideDown effect. I made an example of jsfiddle: https://jsfiddle.net/xmwrrom4/

When the mouse is passed once the expected effect is executed, but when the mouse is passed several times over the button (without waiting for the end of the effect) the effect will repeat several times the same effect generating a bad experience for the user.

I’m looking for the best way to make 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();
        });
    });
});

Answer 1

The best thing is to do it only with CSS... in which case it would be like this:

.cursos span {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0px;
    width: 100%;
    overflow: hidden;
    transition: height 1s;
}

.cursos:hover span{
    height: 100% !important;
}

jsFiddle: https://jsfiddle.net/xmwrrom4/1/