Exemple 1 :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple 1 : Couleurs et taille</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid black;
text-align: center;
line-height: 100px;
</style>
</head>
<body>
<p id="text">Ceci est un paragraphe</p>
<button id="changeColor">Changer couleur</button>
<div class="box" id="box">Une boîte</div>
<button id="animateBox">Animer</button>
</body>
</html>
Enoncé Jquery
Animation avec couleurs et taille
Exemple 1 :
Créer sous la syntaxe du jQuery :
Un script permettant de changer l’arrière-plan en rouge et le texte en
blanc d’un paragraphe lorsqu’on clique sur le bouton Changer
couleur.
Un script permettant d’enchaîner 2 animations sur une div lorsqu'on
clique sur le bouton Animer :
a. La 1ère animation augmente la hauteur de la div à 300px en 3
secondes.
b. La 2ème animation diminue l’opacité de la div à 0.5 en 2 secondes.
Exemple 2 :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple 2 : Opacité et position</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.element {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
</style>
</head>
<body>
Exemple 1 :
<button id="showMessage">Afficher message</button>
<div class="element" id="element"></div>
<button id="animateElement">Animer élément</button>
</body>
</html>
Enonce Jquery
: Animation avec opacité et position
Créer sous la syntaxe du jQuery :
1. Un script permettant d’afficher un message d’alerte lorsqu’on clique sur un bouton
nommé Afficher message.
2. Un script permettant d’appliquer deux animations successives sur un élément
lorsqu’on clique sur le bouton Animer élément :
a. La 1ère animation fait glisser l’élément vers la droite de 200px en 1 seconde.
b. La 2ème animation change l’opacité de l’élément à 0.7 en 2 secondes.
Exemple 3 :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple 3 : Disparition et agrandissement</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#image {
width: 200px;
height: auto;
}
Exemple 1 :
</style>
</head>
<body>
<img src="https://via.placeholder.com/200" alt="Image" id="image">
<button id="hideImage">Faire disparaître</button>
<button id="animateImage">Animer image</button>
</body>
</html>
Enoncé jquery :
Animation avec disparition et agrandissement
Créer sous la syntaxe du jQuery :
1. Un script permettant de faire disparaître progressivement une image lorsqu’on clique
sur le bouton Faire disparaître.
2. Un script permettant d’appliquer deux animations sur une image lorsqu’on clique sur
le bouton Animer image :
a. La 1ère animation augmente la taille de l’image à 150% de sa taille initiale en 2
secondes.
b. La 2ème animation fait réapparaître l’image avec un effet de fondu en 1 seconde.
Exemple 4 :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple 4 : Rotation et bordure</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.rotating-box {
Exemple 1 :
width: 150px;
height: 150px;
border: 2px solid black;
margin: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="rotating-box" id="rotatingBox">Boîte</div>
<button id="addBorder">Ajouter bordure</button>
<button id="animateDiv">Animer div</button>
</body>
</html>
Enonce jquery :
Voici plusieurs exemples d'énoncés similaires utilisant jQuery :
Exemple 1 : Animation avec couleurs et taille
Créer sous la syntaxe du jQuery :
1. Un script permettant de changer l’arrière-plan en rouge et le texte en blanc d’un
paragraphe lorsqu’on clique sur le bouton Changer couleur.
2. Un script permettant d’enchaîner 2 animations sur une div lorsqu'on clique sur le
bouton Animer :
a. La 1ère animation augmente la hauteur de la div à 300px en 3 secondes.
b. La 2ème animation diminue l’opacité de la div à 0.5 en 2 secondes.
Exemple 2 : Animation avec opacité et position
Exemple 1 :
Créer sous la syntaxe du jQuery :
1. Un script permettant d’afficher un message d’alerte lorsqu’on clique sur un bouton
nommé Afficher message.
2. Un script permettant d’appliquer deux animations successives sur un élément
lorsqu’on clique sur le bouton Animer élément :
a. La 1ère animation fait glisser l’élément vers la droite de 200px en 1 seconde.
b. La 2ème animation change l’opacité de l’élément à 0.7 en 2 secondes.
Exemple 3 : Animation avec disparition et agrandissement
Créer sous la syntaxe du jQuery :
1. Un script permettant de faire disparaître progressivement une image lorsqu’on clique
sur le bouton Faire disparaître.
2. Un script permettant d’appliquer deux animations sur une image lorsqu’on clique sur
le bouton Animer image :
a. La 1ère animation augmente la taille de l’image à 150% de sa taille initiale en 2
secondes.
b. La 2ème animation fait réapparaître l’image avec un effet de fondu en 1 seconde.
Votre
Exemple 4 : Animation avec rotation texte
et bordure ici 1
Créer sous la syntaxe du jQuery :
1. Un script permettant d’ajouter une bordure de 5px solide noire à un div lorsqu’on
clique sur le bouton Ajouter bordure.
2. Un script permettant d’enchaîner deux animations personnalisées sur un div lorsqu’on
clique sur le bouton Animer div :
a. La 1ère animation fait pivoter le div de 180 degrés en 3 secondes.
b. La 2ème animation réduit la taille du div de 50% en 2 secondes.
