1

Tenho o seguinte código Jquery:

$(".add").click(function(e) {
    $(".saida").addClass("backgroundRed");
});

e o seguinte css:

.backgroundRed {
    color: #FFF;
    background: #c1272d;
}

Tá tudo certo, ele troca a cor da div quando eu troco a classe mas quero que ele troque a cor da div por 3segundos e depois volte a cor anterior, como faço isso ?

1 Resposta 1

3

Fiz um método que funciona usando CSS3 Animation:

$(".add").click(function(e) {
    $(".saida").addClass("backgroundRed");
    setTimeout(function() { $(".saida").removeClass("backgroundRed"); }, 3500);
});
.saida {
  padding: 16px;
  margin-top: 16px;
}

.backgroundRed {
    animation: fundoVermelho 3.5s;
}

@keyframes fundoVermelho {
  0% { background: transparent; color: #333;}
  33% { background: #c1272d; color: #FFF; }
  85% { background: #c1272d; color: #FFF; }
  100% { background: transparent; color: #333; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">Teste</button>

<div class="saida">SAÍDA</div>

1
  • vlw!!!!!!!!!!!!!
    – Alan PS
    Commented 8/02/2017 às 1:46

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 .