1

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

1 Resposta 1

0

O melhor é fazeres isso só com CSS... nesse caso seria assim:

.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/

3
  • É quase isso, porém não comentei um detalhe existem vários botoes na tela, com o mesmo efeito. Como fazer para que esse efeito seja executado apenas no botão que está com :hover? jsfiddle.net/xmwrrom4/2 Commented 27/05/2016 às 22:23
  • Só faltou aplicar o efeito na apenas na div que contem o elemento em hover: .cursos div:hover span Commented 27/05/2016 às 22:53
  • @AdrianoLuz isso mesmo. CSS neste caso é bem melhor.
    – Sergio
    Commented 28/05/2016 às 7:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .