Question

我正在尝试使用以下代码为鸟翼设置动画（上下翻动一下）：

＆＃13;

$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) ;

＆＃13;

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

＆＃13;

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

＆＃13;

然而，代码并没有循环。它只会旋转到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) ;

＆＃13;

$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) ;

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery循环似乎不起作用

1 个答案: