Question

我使用了一些J-Query来使用rotate插件旋转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")的{{1}}中的属性，并根据需要减少。

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

data

只需拨打：

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({
            ...
        });
    }
}

Demo

如何使用jquery来前后旋转div一定次数

1 个答案: