为什么我的设置函数之间的超时不起作用
Why aren't my setTimeouts between functions working?
我有一系列拉斐尔动画,我想按特定顺序触发。
- 在曲线中淡入淡出。
- 淡入球。
- 沿曲线对球进行动画处理。
我在每个函数之间都有一个 setTimeout,但动画只是同时触发。
在JSFiddle或这里查看它:
Raphael("bounce", 640, 480, function () {
var r = this,
p = r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: .0, "stroke-width": 1}),
len = p.getTotalLength(),
e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function () {
var t = this.attr("transform");
});
r.customAttributes.along = function (v) {
var point = p.getPointAtLength(v * len);
return {
transform: "t" + [point.x, point.y] + "r" + point.alpha
};
};
e.attr({along: 0});
var rotateAlongThePath = true;
function fadecurve(ca,ba,aa,ab){
ca.animate({opacity:1},2000);
setTimeout(fadeball(ba,aa,ab),6000);
}
function fadeball(ba,aa,ab) {
ba.animate({opacity:1},400);
setTimeout(run(ba, aa,ab),5000);
}
function run(ba,aa,ab) {
ba.animate({opacity:1},400);
ba.animate({along: aa}, ab, ">", function () {
ba.attr({along: aa});
});
}
fadecurve(p,e,.9,500);
});
使用匿名函数,例如:
setTimeout(function(){
fadeball(ba,aa,ab);
},6000);
有了setTimeout(fadeball(ba,aa,ab),6000);
函数fadeball
会立即被调用,因为()
这就是问题所在。
确保以这种方式调用 run
函数也:)
问题在于你的函数在 setTimeout 中引用
setTimeout(fadeball(ba,aa,ab),6000);
您在这里所做的是执行函数,然后将结果分配为 setTimeout 的第一个参数,如果您使用匿名函数,那就没问题了。
setTimeout(function(){
fadeball(ba,aa,ab);
},6000);
您立即调用函数,然后将该函数的结果传递给setTimeout
。 您需要将函数传递给setTimeout
:
setTimeout(function(){
fadeball(ba,aa,ab);
},6000);
如果
这是题外话,我很抱歉,但你这样做的方式是不可扩展的。虽然像这样设置重复超时适用于一些功能,但随着步骤数量的增加,多步骤动画变得越来越麻烦。jQuery可以对动画进行排序,但jQuery的内置动画队列通常不提供所需的功能(如瀑布属性)。以下是 Frame.js 的一个更简洁、更强大且可扩展的替代方案:
var ca = p, ba = e, aa = .9, ab = 500;
Frame(500, function(next){
ca.animate({opacity:1}, 2000, next);
});
Frame(4000, function(next){
ba.animate({opacity:1}, 400, next);
});
Frame(5000, function(next){
ba.animate({opacity:1}, 400);
ba.animate({along: aa}, ab, ">", next);
});
Frame(function(next){
ba.attr({ along: aa });
next();
});
Frame.init();
JQuery 的 animate 函数有一个动画完成的回调,因此您可以连续触发动画:
function SecondAnimation() { $('element').animate(....., ThirdAnimation); }
function ThirdAnimation() { $('element').animate(....., FourthAnimation); }
function FourthAnimation() { $('element').animate(.....); }
$('element').animate(....., SecondAnimation);
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 清除设置超时之前的间隔将不起作用
- 更改路线后取消angularjs超时不起作用
- 尝试为函数和passvariable设置超时-dos'不起作用
- Cucumber JS超时获胜'不起作用
- Ionic$超时在电话上不起作用
- 设置超时不起作用
- for循环,回调,一起超时,超时似乎不起作用
- for 循环中的设置超时不起作用
- 为什么我的设置函数之间的超时不起作用
- 在事件侦听器触发期间设置超时不起作用
- ajax超时增加不起作用
- 设置超时在余烬控制器中不起作用
- 设置超时不起作用我不知道为什么
- 设置超时不起作用
- 为什么清除超时不起作用
- JavaScript 超时触发 3 次而不是一次(clearTimeout 不起作用?
- 清除超时在键控 iFrame 上不起作用
- Angular超时不起作用