Question

我有一个div元素来回旋转一定次数，使用以下代码：

插件：

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

代码：

$(document).ready(function(){
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({
        angle: 0,
        animateTo: 2,
        duration: 200,
        callback: rotationBack
    });
}
}
var rotationBack = function () {
$("#pencil").rotate({
    angle: 0,
    animateTo: -2,
    duration: 200,
    callback: rotation
});
}
rotation(10);
});

我真正想要的是div元素在5秒延迟后开始roatating。我尝试将常用的.delay（5000）添加到上面的代码中，如下所示，但它似乎没有什么区别，代码仍然在页面加载后立即执行：

if(times > 0){
    $("#pencil").delay(5000).rotate({
        angle: 0,
        animateTo: 2,
        duration: 200,
        callback: rotationBack
    });

有谁知道为什么.delay（5000）在这种情况下不起作用？

Answer 1

.delay()仅适用于队列中的对象。如果它不适用于该插件，则意味着它们没有以将它们添加到jQuery队列的方式实现它们的动画。使用setTimeout但

添加此功能非常容易

if (times > 0) {
    setTimeout(function () {
        $("#pencil").rotate({
            angle: 0,
            animateTo: 2,
            duration: 200,
            callback: rotationBack
        });
    }, 5000);

将延迟添加到第一次轮换中，从

更改代码

rotation(10);

到

setTimeout(function(){
    rotation(10);
},5000);

Answer 2

delay不适合你的原因是因为最初动画队列中没有任何内容可以延迟。

要解决此问题，您需要对.rotate电话进行排队：

$('#pencil').delay(4000).queue(function(){

  $(this).rotate({
    angle: 0,
    animateTo: 2,
    duration: 200,
    callback: rotationBack
  });

});

查看 this jsbin 作为示例。

另请查看此问题How to delay jquery animation。

如何延迟j查询旋转动画

2 个答案: