title: do you know why my animate method doesnt work for top property?
body: <p>I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css"&gt;
      &lt;script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Required meta tags --&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
         &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=" top-back"&gt;
          &lt;img src="images/Untitled-2.png" alt=""&gt;
      &lt;/div&gt;
      &lt;div class=" main-back" &gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-12 "&gt;
  
                              &lt;div class="blue"&gt;
                                  &lt;img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;"&gt;
                                  &lt;ul&gt;
                                      &lt;li style="left: 25%; top: 5px" class="pics1"&gt;&lt;img src="images/face1.png" alt="" &gt;Facelift surgery&lt;/li&gt;
                                      &lt;li style="left: 25%; top: 200px" class="pics2"&gt;&lt;img src="images/face2.png" alt=""&gt;Lip Augmentation&lt;/li&gt;
                                      &lt;li style="left: 25%; top: 390px" class="pics3"&gt;&lt;img src="images/face3.png" alt=""&gt;Botox Injections&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-8"&gt;
                      &lt;div class="row white-box"&gt;
                          &lt;div class="col-5"&gt;
                              &lt;div class=""&gt;
                              &lt;h1&gt;Facelift Surgery&lt;/h1&gt;
                              &lt;p&gt;Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.
  
                              &lt;/p&gt;
                              &lt;button&gt;Make an appointment&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-7 face"&gt;
                              &lt;img src="images/face.png" alt=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bottom-back"&gt;
          &lt;img src="images/Untitled-3.png" alt=""&gt;
      &lt;/div&gt;
  
  
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <pre><code>/* CSS Document */
  body{
      margin: 0
  }
  .top-back img{
   width: 100%;
   padding: 0 !important;
   position: relative;
   top: 10px
  }
  .main-back{
      background-color: #f3e5d8;
      height: 600px
  }
  .bottom-back img{
      position: relative;
      top: -10px;
      width: 100%
  }
  .white-box{
      background-color: #fff9f3;
      border-radius: 30px;
      position: relative;
      top: 108px;
      height: 450px
  }
  .face img{
      width: 94.5%;;
      position: absolute;
      top: -124px;
      right: 23px;
  }
  .blue{
  
      background-color:#2d3663;
  
      border-radius: 30px;
      position: relative;
      top: -4px;
      width: 78%
  }
  .blue ul{
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      color: white;
      list-style-type: none;
      padding: 0;
      height: 596px
  
  }
  .blue li{
      padding: 15px 0;
      position: absolute
  
  }
  .blue img{
      display: block;
      margin: auto;
      width: 90%;
      margin-bottom: 10px
  }
  .white-box h1 {
      color: #cd8274;
      margin-top: 40px
  }
  .white-box p{
      color: #474e75;
      margin: 40px 0;
      line-height: 29px;
      font-size: 20px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  </code></pre>
  
  <pre><code>$(document).ready(function(){
      $('.pics2').hover(function(){
          $('.magic').animate({top: "195px"});
  
      });
      $('.pics1').hover(function(){
          $('.magic').animate({top: "0"});
  
  
      });
      $('.pics3').hover(function(){
          $('.magic').animate({top: "384px"});
  
      })
  
  });// JavaScript Document`
  </code></pre>