如何让 JQuery 在旋转动画的循环内等待

Question

我有一个圆圈，里面有一个百分比文本，从 0% 开始。一旦我将圆圈悬停，它就会从 0 变为 100%（在圆圈周围有另一个效果）。就目前而言，百分比直接从 0 变为 100，我希望它显示进度（0,1,2...,99,100），但我无法让 JQuery 在每次 for 迭代之间等待。

这是我尝试过的：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 - 见下一个代码sn-p：

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。 在您的代码中，框的百分比立即变为 100%，因为您使用了 for 循环。 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()。