Javascript jQuery animate（）显示错误$（…）。animate不是函数生存时间 ---------------------------------------------------------------------------- .fa cog{ 利润率：10%50%；颜色：红色； /*-moz过渡：所有0.5s线性； -webkit过渡：所有0.5s线性；过渡：所有0.5s线性*/ } .下来{ -moz变换：旋转（180度）； -webkit变换：旋转（180度）；变换：旋转（180度）； } -------------------------------------------------------------------------------------------------------------- $（文档）.ready（函数（）{ $（“.fa cog”）.on（'mouseenter'，function（）{ $（this.animate（{rotate:180}）{ 步骤：函数（现在，fx）{ /*$（this.css（{'-moz transform'：'rotate（'+now+'deg'）， “-webkit变换”：“旋转（'+now+'deg）”， “变换”：“旋转（'+now+'deg）}）*/ $（this）.css（'-webkit transform'，rotate（'+now+'deg'）； $（this）.css（'-moz transform'，rotate（'+now+'deg'）； $（this.css（'transform'，'rotate（'now+'deg'）； }，持续时间：'slow'}，'linear'）； }); });_Javascript_Jquery_Html_Css_Animation

Javascript jQuery animate（）显示错误$（…）。animate不是函数生存时间 ---------------------------------------------------------------------------- .fa cog{ 利润率：10%50%；颜色：红色； /*-moz过渡：所有0.5s线性； -webkit过渡：所有0.5s线性；过渡：所有0.5s线性*/ } .下来{ -moz变换：旋转（180度）； -webkit变换：旋转（180度）；变换：旋转（180度）； } -------------------------------------------------------------------------------------------------------------- $（文档）.ready（函数（）{ $（“.fa cog”）.on（'mouseenter'，function（）{ $（this.animate（{rotate:180}）{ 步骤：函数（现在，fx）{ /*$（this.css（{'-moz transform'：'rotate（'+now+'deg'）， “-webkit变换”：“旋转（'+now+'deg）”， “变换”：“旋转（'+now+'deg）}）*/ $（this）.css（'-webkit transform'，rotate（'+now+'deg'）； $（this）.css（'-moz transform'，rotate（'+now+'deg'）； $（this.css（'transform'，'rotate（'now+'deg'）； }，持续时间：'slow'}，'linear'）； }); });

javascript jquery html css animation

Javascript jQuery animate（）显示错误$（…）。animate不是函数生存时间 ---------------------------------------------------------------------------- .fa cog{ 利润率：10%50%；颜色：红色； /*-moz过渡：所有0.5s线性； -webkit过渡：所有0.5s线性；过渡：所有0.5s线性*/ } .下来{ -moz变换：旋转（180度）； -webkit变换：旋转（180度）；变换：旋转（180度）； } -------------------------------------------------------------------------------------------------------------- $（文档）.ready（函数（）{ $（“.fa cog”）.on（'mouseenter'，function（）{ $（this.animate（{rotate:180}）{ 步骤：函数（现在，fx）{ /*$（this.css（{'-moz transform'：'rotate（'+now+'deg'）， “-webkit变换”：“旋转（'+now+'deg）”， “变换”：“旋转（'+now+'deg）}）*/ $（this）.css（'-webkit transform'，rotate（'+now+'deg'）； $（this）.css（'-moz transform'，rotate（'+now+'deg'）； $（this.css（'transform'，'rotate（'now+'deg'）； }，持续时间：'slow'}，'linear'）； }); });,javascript,jquery,html,css,animation,Javascript,Jquery,Html,Css,Animation,伙计们，我正试图使用jquery的animate（）方法来旋转一个齿轮。我知道我可以让一个类使用一些转换，转换，然后添加或删除那个类。但我想在这里使用animate（）。stackoverflow上的几个文档说，我们实际上不必使用真正的CSS属性，如文本索引或边框间距，但可以指定一个假的CSS属性，如旋转或my awesome属性或其他。使用不会在将来成为实际CSS属性的东西可能是个好主意。我试了所有的方法都没发现我代码中的错误。忽略我注释掉的代码。问题在这行： <!DOCTYPE htm

伙计们，我正试图使用jquery的animate（）方法来旋转一个齿轮。我知道我可以让一个类使用一些转换，转换，然后添加或删除那个类。但我想在这里使用animate（）。stackoverflow上的几个文档说，我们实际上不必使用真正的CSS属性，如文本索引或边框间距，但可以指定一个假的CSS属性，如旋转或my awesome属性或其他。使用不会在将来成为实际CSS属性的东西可能是个好主意。我试了所有的方法都没发现我代码中的错误。忽略我注释掉的代码。

问题在这行：

<!DOCTYPE html>
<html>
<head>
  <title>Alive Time</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="code.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
  <body>
    <i class="fa fa-cog" style="font-size:100px"></i>
    <i class="fa fa-arrow-right" style="font-size:100px"></i>

  </body>

</html>
----------------------------------------------------------------------------
.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'); 
});
});

在您的情况下，不能使用jQuery的精简版本，因为此版本没有动画。只需将其替换为以下内容：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

正如我所看到的，您使用的是jQuery的精简版，它不包括动画库。请使用jQuery的完整版本

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

仍然不起作用。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>