Question

我有一个循环的jQuery函数。我想要做的是让$bird_wing_left元素旋转30度，然后旋转回0度（在无限循环中）。

$(document).ready(function() {

    var rotate = 0;

    setInterval(function(){ 

        rotate = 30;

        $bird_wing_left.css({ transform: "rotate(" + rotate + "deg)" }).delay(1000).queue(function(){
            rotate = 0;
            $(this).css({ transform: "rotate(" + rotate + "deg)" });
        });

    }, 3000);
});

它第一次旋转30度，然后旋转到0度，然后旋转到30度。然而，之后，它似乎忽略了回调（它将度数值重置为0），因此，它只是继续保持30度开启。

可能是什么问题？

这是jsFiddle：https://jsfiddle.net/iamacatperson/86z26hdw/

Answer 1

当你queue函数时，你需要dequeue（或调用“next”，以下更多内容）以允许队列继续处理（{{3} }}）。只需在队列回调中添加$(this).dequeue()：

var $bird_wing_left = $("#wing");
$(document).ready(function() {

  var rotate = 0;

  setInterval(function() {

    rotate = rotate + 30;

    $bird_wing_left.css({
      transform: "rotate(" + rotate + "deg)"
    }).delay(1000).queue(function() {
      rotate = rotate - 30;
      $(this).css({
        transform: "rotate(" + rotate + "deg)"
      }).dequeue();       // <====================
    });

  }, 3000);
});

body {
  padding-top: 2em;
}

<div id="wing" style="width: 10em">Bird wing</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者，从jQuery 1.4开始，queue回调被赋予了一个参数（传统上称为next），它可以调用以保持队列运行：

var $bird_wing_left = $("#wing");
$(document).ready(function() {

  var rotate = 0;

  setInterval(function() {

    rotate = rotate + 30;

    $bird_wing_left.css({
      transform: "rotate(" + rotate + "deg)"
    }).delay(1000).queue(function(next) {  // <=====
      rotate = rotate - 30;
      $(this).css({
        transform: "rotate(" + rotate + "deg)"
      });
    
      next();                              // <=====
    });

  }, 3000);
});

body {
  padding-top: 2em;
}

<div id="wing" style="width: 10em">Bird wing</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注：如果您愿意，可以使用+=和-=，例如rotate += 30;和rotate -= 30;

Answer 2

快速修复可以在设置之前检查旋转变量值。

if(rotate  == 0)
  rotate = rotate + 30;
else 
  rotate = 0;

`queue`回调只执行一次？

2 个答案: