Correction application animate()
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
-
Application02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Code HTML
-
Code CSS
-
Code JS
-
Application03
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Code HTML
-
Code CSS
-
Code JS
<!doctype html>
<head>
<title>The jQuery Example</title>
<!--<script type = "text/javascript" src = "js/jQuery.js"></script>
<link type="text/stylesheet" href="imageanime.css">
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type = "text/javascript" src = "application01.js"></script>
<link type="text/css" rel="stylesheet" href="application01.css">
</head>
<body>
<button>Animez le block <div></button>
<div id="my_div" ></div>
</body>
</html>#my_div{
background-color: blue;
height:100px;
width:146px;
position:absolute;
opacity: 0.45;
cursor: pointer;
}
.rotate {
transition: all 2000ms ease;
transform: rotate(180deg);
}$(function() {
$("button").click(function(){
$("div").animate({
left: '400px',
height: '+=50px',
width: '+=50px'
});
});
$("#my_div").click(function(){
$("#my_div").addClass('rotate');
});
});<!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>
<button id="animer">Lancer l'animation</button><br/><br/>
<div id="carre"></div>
</body>
</html>#carre {
position: absolute;
top: 35px;
left: 10px;
background-color: rgba(0, 217, 255, 0.76);
width: 100px;
height: 100px;
border-style: solid;
border-width: 3px;
border-color: rgb(12, 27, 241);
border-radius: 6px;
opacity: 0.65;
}
.rotate {
transition: all 2000ms ease;
transform: rotate(-90deg);
}$(function() {
$('#animer').on('click', function(){
$('#carre').animate({left:'350px'})
.animate({top:'350px'})
.animate({left:'10px'})
.animate({top:'35px'}),5000;
});
$("#carre").click(function(){
$("#carre").addClass('rotate');
});
});<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type = "text/javascript" src = "application03.js"></script>
<link type="text/css" rel="stylesheet" href="application03.css">
</head>
<body>
<button id="position">Nouvelle position</button><br/><br/>
<button id="taille">Reduire la taille</button><br/><br/>
<div id="boite"></div>
</body>
</html>#boite {
position: absolute;
top: 75px;
left: 10px;
background-color: rgba(0, 217, 255, 0.76);
width: 100px;
height: 100px;
border-style: solid;
border-width: 3px;
border-color: rgb(12, 27, 241);
border-radius: 6px;
opacity: 0.65;
}
.rotate {
transition: all 2000ms ease;
transform: rotate(-90deg);
}$(function() {
$('#position').on('click',function(){
$('#boite').offset({top:120,left:200});
});
$('#taille').on('click',function(){
$('#boite').width('150px').height('30px');
});
$('#boite').click(function(){
$('#boite').addClass('rotate');
});
});