Correction application animate() V2

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



      1. Code CSS
        • 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; 
             }
      2. Code JS
        • $(function() {
            $("ul li a").hover(function(){
              var ddd=$(this).attr("data-color");
              $("body").css("background",ddd);
            }); 
          });



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement