title: jQuery animate() showing error of $(...).animate is not a function
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Alive Time&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="code.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;
      &lt;i class="fa fa-cog" style="font-size:100px"&gt;&lt;/i&gt;
      &lt;i class="fa fa-arrow-right" style="font-size:100px"&gt;&lt;/i&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  ----------------------------------------------------------------------------
  .fa-cog{
      margin: 10% 50%;
      color: red;
      /*-moz-transition: all 0.5s linear;
      -webkit-transition: all 0.5s linear;
      transition: all 0.5s linear;*/
  }
  
  
  
  
  .down {
         -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      transform:rotate(180deg);
  }
  --------------------------------------------------------------------------------------------------------------
  $(document).ready(function(){
  
     $(".fa-cog").on('mouseenter',function(){
   $(this).animate({rotate:180},{
    step:function(now,fx){
  
      /*$(this).css({' -moz-transform':'rotate('+now+'deg)',
      '-webkit-transform':'rotate('+now+'deg)',
      'transform':'rotate('+now+'deg)'});*/
  
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
        $(this).css('-moz-transform','rotate('+now+'deg)');
        $(this).css('transform','rotate('+now+'deg)');
    },duration:'slow'},'linear'); 
  });
  });
  </code></pre>
  
  <p>Guys I am trying to use specifically animate() method of jquery to rotate a cog. I know I can make a class use some transition,transform and then add or remove that class. But I want to use animate() up here. Couple of docs on stackoverflow said that we don’t actually have to use a real CSS property, like text-index or border-spacing, but instead you can specify a fake CSS property, like rotation or my-awesome-property or else. It might be a good idea to use something that does not risk becoming an actual CSS property in the future. I tried every thing couldnt find the mistake in my code. Ignore the code which I have commented out.</p>