javascript - 如何使用jquery来回旋转div一定次数

Question

我使用了一些 J-Query 来使用旋转插件旋转 div。问题是它一直在旋转，而我需要简单地旋转 5 次然后停止。到目前为止，这是我的代码：

插入：

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

脚本：

$(document).ready(function(){
var rotation = function (){
$("#pencil").rotate({
  angle:0, 
  animateTo:2,
  duration:200,
  callback: rotationBack
});
}
var rotationBack = function() {
$("#pencil").rotate({
  angle:0, 
  animateTo:-2,
  duration:200,
  callback: rotation
});
}
rotation();
});

有人可以帮忙吗？

Answer 1

您的代码中没有任何内容可以限制次数或重复次数，因此这些函数将无限期地相互调用。

有更好的方法来实现这一点，但有效的方法是：

将重复次数作为属性存储在$("#pencil")'s中data，并根据需要递减。

jQuery 可以将数据存储在 DOM 元素中的数据对象中，使用以下接口：

el.data('key', val); //stores value in key
el.data('key'); //retrieve key's value


var rotation = function (times) {
    var el = $("#pencil");
    if(typeof times == 'number'){
        el.data('repeatRotation',times);
    } else {
        times = el.data('repeatRotation')-1;
        el.data('repeatRotation',times);
    }

    if(times > 0){
        $("#pencil").rotate({
            ...
        });
    }
}

只需调用它：

rotation(5);

演示。