Back

Correction application animate()

La méthode animate() de jQuery

  1. Objectifs

    • Connaitre les méthodes animate()
    • Etre capable d’animer des modifications apportées aux propriétés CSS

  2. Application01

    1. Énoncé
    2. Solution
      1. Code HTML
          2. <!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>



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

}
.rotate {
    transition: all 2000ms ease;
    transform: rotate(180deg);
}
      2. Code JS
          3. $(function() {
  $("button").click(function(){
     $("div").animate({
       left: '400px',
       height: '+=50px',
     width: '+=50px'
     });
   });
   $("#my_div").click(function(){
     $("#my_div").addClass('rotate');
   });
});

    3. Application02

      1. Énoncé
      2. Solution
        1. Code HTML
            2. <!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>
        2. Code CSS
            3. #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);
}
        3. Code JS
            4. $(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');
  });
});

      3. Application03

        1. Énoncé
        2. Solution
          1. Code HTML
              2. <!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>
          2. Code CSS
              3. #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);
}
          3. Code JS
              4. $(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
author avatar
Riadh HAJJI

Riadh HAJJI

Ces articles pourraient aussi vous intéresser

Correction application animate() V2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) 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 …

La méthode animate() de jQuery v2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre les méthodes animate() de deuxième variante Etre capable d’animer des modifications apportées aux propriétés CSS Présentation La méthode animate() existe …

La méthode attr() en jQuery
28 juin, 2020

Les méthodes addClass et removeClass en jQuery La méthode css() en jQuery La méthode attr() en jQuery Le dimensionnement d’un élément en jQuery Le positionnement d’un élément en jQuery TP4-3 jQuery (Correction) TP5 jQuery (Correction) La méthode attr() en jQuery Objectifs Etre capable d’utiliser la méthode attr() en jQuery Présentation La méthode attr() est utilisée pour définir ou renvoyer les …

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement