Bonjour,
Je suis débutant en jQuery, j'ai écrit des codes pour faire une animation d'un bouton, il ne fonction que la première fois, j'ai fait pas mal de recherche sur interne, mais je n'ai pas trouver la solution, j'ai besoin l'aide, SVP. Merci par avance.
Voici mes codes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
button {
width:200px;
}
@keyframes btninfo {
from { width:100px; }
to { width:200px;}
}
.btn-click {
animation-name: btninfo;
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="container">
<h2>animation</h2>
<button class="btn btn-primary">button</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("button").on ('click', function(){
$(this).addClass('btn-click');
setTimeout(function(){
$(this).removeClass('btn-click');
},1000);
});
});
</script>
</body>
</html>
Je suis débutant en jQuery, j'ai écrit des codes pour faire une animation d'un bouton, il ne fonction que la première fois, j'ai fait pas mal de recherche sur interne, mais je n'ai pas trouver la solution, j'ai besoin l'aide, SVP. Merci par avance.
Voici mes codes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
button {
width:200px;
}
@keyframes btninfo {
from { width:100px; }
to { width:200px;}
}
.btn-click {
animation-name: btninfo;
animation-duration: 2s;
}
</style>
</head>
<body>
<div class="container">
<h2>animation</h2>
<button class="btn btn-primary">button</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("button").on ('click', function(){
$(this).addClass('btn-click');
setTimeout(function(){
$(this).removeClass('btn-click');
},1000);
});
});
</script>
</body>
</html>