jQuery

Correction application animate()

Un cours complet pour maîtriser Correction application animate().

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

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

<!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 &lt;div></button>
            <div id="my_div" ></div>
   </body>
</html>

Code CSS

#my_div{
    background-color: blue;
    height:100px;
    width:146px;
    position:absolute;
    opacity: 0.45;
cursor: pointer;

}
.rotate {
    transition: all 2000ms ease;
    transform: rotate(180deg);
}

Code JS

$(function() {
  $("button").click(function(){
     $("div").animate({
       left: '400px',
       height: '+=50px',
     width: '+=50px'
     });
   });
   $("#my_div").click(function(){
     $("#my_div").addClass('rotate');
   });
});

Application02

Énoncé
- Vous pouvez visualiser l'énoncé de l'application

Solution

Code HTML

<!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>

Code CSS

#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);
}

Code JS

$(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');
  });
});

Application03

Énoncé
- Vous pouvez visualiser l'énoncé de l'application

Solution

Code HTML

<!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>

Code CSS

#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);
}

Code JS

$(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');
  });
});

Animation avec jQuery

Animation d'images en Jquery

Sommaire du cours jQuery

Correction application animate()

Sommaire du cours

Autres catégories

Objectifs

Application01

Énoncé

Solution

Code HTML

Code CSS

Code JS

Application02

Énoncé

Solution

Code HTML

Code CSS

Code JS

Application03

Énoncé

Solution

Code HTML

Code CSS

Code JS

Sommaire du cours jQuery