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



Riadh HAJJI

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement