Question

我正在使用以下代码;但我只是喜欢它暂停，因为可能像500或半秒;然后继续循环。我想知道如何或如果我可以编辑我当前实现的片段来处理这个问题。

jQuery.fn.shake = function() {
    this.each(function(i) {
        $(this).css({ "position" : "relative" });
        for (var x = 1; x <= 3; x++) {
            $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20);
        }
    });
    return this;
}

$(document).ready(function() {
    $("#section7").shake();
});

Answer 1

使用jQuery插件执行此操作的正确方法是添加回调，然后使用递归函数或循环来触发插件，这是您想要的次数

jQuery.fn.shake = function(callback) {
    this.each(function(i) {
        $(this).css({ "position" : "relative" });
        var promises = [];
        for (var x = 1; x <= 3; x++) {
            var ani =$(this).animate({ left: -15 }, 10)
                   .animate({ left: 0 }, 50)
                   .animate({ left: 15 }, 10)
                   .animate({ left: 0 }, 20);
            promises.push(ani);
        }
        $.when.apply(undefined,promises).then(callback)
    });
    return this;
}

$(document).ready(function() {
    (function recursive() {
        $("#section7").shake(function() {
            setTimeout(recursive, 500);
        });
    })();
});

FIDDLE

Answer 2

您可以执行delay(millis);之类的操作。您可以在for循环后执行此操作，也可以在动画$(this).animate(/*some code*/).delay(/*time in millis*/).animate(/*some other code*/);

之间添加

Answer 3

您可以将for循环上的计数器增加到某个较大的数字，然后在animate函数的末尾添加延迟。我重复动画3次以与原始的动画功能重合：

jQuery.fn.shake = function() {
  this.each(function(i) {
  $(this).css({ "position" : "relative" });
  for (var x = 1; x <= 100; x++) {
        $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20);
        $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20);
        $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20).delay(500);
  }
  });
  return this;
}

Answer 4

我会通过致电window.setTimeout

来做到这一点

jsfiddle

jQuery.fn.shake = function() {
    this.each(function(i, elem) {
        $(this).css({ "position" : "relative" });
        var counter = 1;
        var jiggle = function() {
           $(elem).animate(
                               { left: -15 }, 
                               10
                           )
                   .animate({ left: 0 }, 50)
                   .animate({ left: 15 }, 10)
                   .animate({ left: 0 }, 20);
            if(++counter <= 3) {
                window.setTimeout(jiggle, 1000);
            }
        }
        jiggle();
    });
    return this;
}


$(document).ready(function() {
    $("#section7").shake();
});

在循环上摇动div

4 个答案: