Correction application animate() V2
La méthode animate() de jQuery
-
Objectifs
- Connaitre les méthodes
animate() - Etre capable d’animer des modifications apportées aux propriétés CSS
-
Application01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Code HTML
-
Code CSS
-
Code JS
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type = "text/javascript" src = "application02.js"></script>
<link type="text/css" rel="stylesheet" href="application02.css">
</head>
<body>
<ul>
<li><a href="#" data-color="deepskyblue">Deepskyblue</a></li>
<li><a href="#" data-color="seagreen">Seagreen</a></li>
<li><a href="#" data-color="blueviolet">Blueviolet</a></li>
<li><a href="#" data-color="deeppink">Deeppink</a></li>
<li><a href="#" data-color="peru">Peru</a></li>
<li><a href="#" data-color="firebrick">Firebrick</a></li>
<li><a href="#" data-color="#f06d06">#f06d06</a></li>
</ul>
<h2>Changement de couleur</h2>
</body>
</html>body {
background:crimson;
transition: .6s;
}
h2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
font-size: 50px;
text-transform: uppercase;
color: #fff;
font-family: merienda;
}
ul{
margin-top: 80px;
}
ul li{
display: block;
width: 100px;
text-align: center;
padding: 10px 25px;
height: 40px;
border : 3px solid #fff;
margin: 15px 0;
}
ul li a{
color: #fff;
font-size: 15px;
line-height: 36px;
text-decoration: none;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}$(function() {
$("ul li a").hover(function(){
var ddd=$(this).attr("data-color");
$("body").css("background",ddd);
});
});