jQuery looping doesn't seem to work

Question

I am trying to animate a bird wing (to flap a little bit up and down) using the below code:

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

However, the code doesn't loop. It would just rotate to 70 degrees and stop there. I called the function inside the function so I'm not sure why it's not looping.

because using an animate with a duration of 0 seems pretty useless. also, we dont see your css transitions. have a look at css transition end events in javascript http://stackoverflow.com/questions/2794148/css3-transition-events — Alex, Jul 24 '15 at 11:25

score 0 · Answer 1 · answered Jul 24 '15 at 11:38

Your transform call does nothing because you specify an animation time of 0. If you want an immediate transformation, use css as in your callback. Moreover, looking at the development console in Chrome showed a too much recursion error, so what you should do is rewrite your code using 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>

jQuery looping doesn't seem to work

1 Answers1