我试图制作一些动画依赖于CSS过渡,添加和删除类:(现在有些代码,然后是一些进一步的解释)
/*variables are defined outside this function*/
function effect() {
switch(activeWall.attr("animation-order")) {
case "incremental":
if(!j) { /*if first box*/
boxes.eq(j).addClass("hovered");
++j;
break;
};
if (j == defaultOrder.lenght) { /*if last box*/
boxes.eq(j).removeClass("hovered");
setTimeout(break, 1000); /*syntax error*/
};
/*any other*/
boxes.eq(j).addClass("hovered");
boxes.eq(j-1).removeClass("hovered");
++j;
break;
default:
if(!i) { /*if first box*/
boxes.eq(defaultOrder[i]).addClass("hovered");
++i;
break;
};
if (i == defaultOrder.lenght) { /*if last box*/
boxes.eq(defaultOrder[i]).removeClass("hovered");
setTimeout(break, 1000); /*syntax error*/
};
/*any other*/
boxes.eq(defaultOrder[i]).addClass("hovered");
boxes.eq(defaultOrder[i-1]).removeClass("hovered");
++i;
break;
};
};
hovered
类中的转换,以便用户在最后一个框的情况下看到它,在发生其他事情之前,我需要等待switch
之后再使用break
。在删除类之后放置像boxes.eq(i).removeClass("hovered").delay(n)
这样的延迟将是无效的,因为下一个jQuery动画应用于其他元素。
我认为将break
与setTimeout
放在一起会有问题,但我会收到语法错误。
那么,我如何在过渡生效所需的时间内暂停脚本流程?我是否严重使用setTimeout
?
答案 0 :(得分:2)
您无法使用setTimeout()
来致电break
。
请尝试以下更改:
注意length
的拼写,通常你应该与length - 1
进行比较,以获得最后一个元素的索引
if (j == (defaultOrder.length-1)) { /*if last box*/
setTimeout((function() {
var j_ = j; //keep j during timeout
return function() {
boxes.eq(j_).removeClass("hovered");
};
})(), 1000);
break;
}
default
案例的修改是相应的:
if (i == (defaultOrder.length-1)) { /*if last box*/
setTimeout((function() {
var i_ = i; //keep i during timeout
return function() {
boxes.eq(defaultOrder[i_]).removeClass("hovered");
};
})(), 1000);
break;
}