jQuery循环似乎不起作用

Question

我正在尝试使用以下代码为鸟的翅膀设置动画（上下摆动一点）：

 $bird_wing_left = $(".bird_wing_left"); function rotate($bodysec) { $bodysec.animate({ transform: "rotate(30deg)" }, 0, function() { $(this).css({ transform: "rotate(70deg)" }); rotate($(this)) ; }); } rotate ($bird_wing_left) ; 

 .bird_wing_left { margin: 50px ; width: 100px ; height: 100px ; background: blue ; } 

 <div class="bird_wing_left"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

但是，代码不会循环。 它将旋转到70度并停在该处。 我在函数内部调用了函数，所以我不确定为什么不循环。

Answer 1

transform调用不执行任何操作，因为您指定的动画时间为0 。 如果要立即进行转换，请在回调中使用css 。 此外，查看Chrome中的开发控制台会显示too much recursion错误，因此您应该使用setInterval重写代码：

$bird_wing_left = $(".bird_wing_left");

function rotate ($bodysec) {
  (function () {
    var $_bodysec = $bodysec ;
    var $_angle   = 30 ;
    setInterval (function () {
      $_bodysec.css({
        transform: "rotate(" + $_angle + "deg)"
      });
      $_angle = $_angle == 70 ? 30 : 70 ;
    }, 200) ;

  }) () ;
}

rotate ($bird_wing_left) ;

 $bird_wing_left = $(".bird_wing_left"); function rotate ($bodysec) { (function () { var $_bodysec = $bodysec ; var $_angle = 30 ; setInterval (function () { $_bodysec.css({ transform: "rotate(" + $_angle + "deg)" }); $_angle = $_angle == 70 ? 30 : 70 ; }, 200) ; }) () ; } rotate ($bird_wing_left) ; 

 .bird_wing_left { margin: 50px ; width: 100px ; height: 100px ; background: blue ; } 

 <div class="bird_wing_left"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>