El problema es atenuar el color del botón de btn-primary class a btn-success . Esto requiere que agreguemos transiciones, así como la clase btn-success .
Acercarse:
- En primer lugar, agregue una transición con la ayuda de @keyframes para cambiar lentamente el color de fondo de azul a verde usando la siguiente sintaxis para la clase btn-success:
@keyframes animation-name {keyframes-selector {css-styles;}} - En segundo lugar, tenemos que apuntar a la clase de cambio a un evento de clic adicional usando:
// To target the elements having class change $(".change") // To add click event to elements having class change $(".change").click(function(){}) - Finalmente, para cambiar la clase de agregar y eliminar, usamos los siguientes métodos button.addClass («btn-success») , button.removeClass («btn-primary») respectivamente.
El siguiente ejemplo ilustra el enfoque:
Ejemplo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
<style>
body {
text-align: center;
}
.btn.btn-success {
transition-duration: 2s;
animation-name: colorTransition;
}
@keyframes colorTransition {
from {
background-color: #007bff;
}
to {
background-color: #32cd32;
}
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>
fade in color button from
btn-primary to btn-success
</b>
<div class="cb">
<a class="btn btn-primary change">Click</a>
</div>
<script type="text/javascript">
$(".change").click(function (e) {
var button = $(".change");
button.addClass("btn-success");
button.removeClass("btn-primary");
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shivanshsaxena1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA