如何让JQuery在循环动画中循环等待

Question

我有一个圆圈，里面有一个百分比文字，以0％开头。一旦我盘旋它，它就会从0到100％（围绕圆圈的另一种效果）。至于现在，百分比直接从0到100，我希望它显示进度（0,1,2 ...，99,100）但我无法在每次for次迭代之间等待JQuery等待

这就是我尝试过的： JSFiddle demo 。

注意：我的代码现在可以使用chrome。

这是一次迭代：

function actions(i){
    var box = $('#box');
    box.css('transform','rotate(' + i + ' deg)');
    box.css('-ms-transform','rotate(' + i + 'deg)');
    box.css('-webkit-transform','rotate(' + i + 'deg)');
    prec = (100*(i + 135))/360;
    $("div.prec").delay(100).html(Math.round(prec)+"%");
}

我了解delay()需要排队且html()没有排队，所以我已经尝试了setTimeout，但它也没有用。我还尝试了setInterval - 请参阅下一个代码段：

setInterval(function () {
    $("div.prec").html(Math.round(prec)+"%");
},100);

更清楚一点，我希望百分比符合效果进度 - 如果三角形绕过一半，百分比应该是50，所以，当我不再徘徊在圆圈时它应该逐渐回到0。

Answer 1

首先，删除剩余的transition: all 1s css规则！这在所有解决方案中都会遇到麻烦。

1。教育 - 使用setTimeout

for循环不能按预期工作，javascript是不构建为活动等待循环，如下所示：

for (var i = -135; i < 225; i++){
    actions(i);
    sleep(some time);      
}

您必须使用超时和回调。禁用.delay函数调用并将for循环重写为迭代的setTimeout回调，如下所示：

function loopit(dir, i){
    if (typeof i == "undefined") 
        i = -135;
    if (i >= 225)
        return;
    actions(i);
    setTimeout(function () {
        loopit(dir, i + 1);
    }, 1);
}

反向旋转将以类似方式编写 - 您可以自己编写作为作业： - ）

http://jsfiddle.net/NNq3z/10/

2。简单 - 使用jQuery .animate（）

最简单的方法是使用jQuery .animate()函数，它将为您设置动画“循环”。要为百分比文本设置动画，请使用progress回调。动画旋转虽然很棘手，但您需要使用special trick：

$({ deg: deg_from } ).animate({
    deg: deg_to
}, {
    duration: 1000,
    progress: function (animation, progress) {
        $("div.prec").html(Math.round(progress*100)+"%");
    },
    step: function(now) {
        $('#box').css({
            transform: 'rotate(' + now + 'deg)'
        });
    }
});

http://jsfiddle.net/q9VXC/1/

Answer 2

http://jsfiddle.net/NNq3z/13/

var i = -135,box = $("#box"),prec;
setTimeout(function(){
if($("#circle").is(":hover"))
   loopit("c");
else
    loopit("nc");
},1);
function loopit(dir){
if (dir=="c")
    i++;        
else
    i--;
if(i<-135)
    i=-135;
if(i>225)
    i=225;
prec = (100*(i + 135))/360;   
$(".prec").html(Math.round(prec)+"%");
box.css("transform","rotate("+i+"deg)")
.css("-ms-transform","rotate("+i+"deg)")
.css("-moz-transform","rotate("+i+"deg)")
.css("-webkit-transform","rotate("+i+"deg)");
setTimeout(function(){
if($("#circle").is(":hover"))
   loopit("c");
else
    loopit("nc");
},1);
}

已移除transition:all 1s。 在您的代码中，由于您使用for循环，因此框的百分比会立即更改为100％。 For循环将非常快速地执行，就好像它立即变为100％所以不建议使用。

Answer 3

您应该使用setInterval，每次都必须增加percentage：

var percentage = 0;
var timer = setInterval(function() {
    percentage++;
    if (percentage > 100) {
        clearInterval(timer);
    } else {
        $("div.prec").html(percentage + "%");
    }
}

你也可以在那里打电话给actions()。