javascript – 同步动画,或在动画的中间点调用

2023年12月2日 193次阅读

我在
JQuery中做了一些有点难度的动画,我还没有找到一个很好的方法来处理它.我有一个移动网站,屏幕上有一个场景,显示一系列选项.当做出选择时,选择滑出屏幕,同时引入城市的新场景(它应该模拟驾驶) – 而这个场景,而不是停在屏幕的中心,它一直通过通过屏幕的另一端.问题是,当它到达中心时,我想触发一个新的div进入它后面,匹配速度等,所以一切都是同步的.

如果我将城市场景的动画设置为两个部分,一次到中心,它可以触发新的选择场景进入,一旦离开屏幕,有一个明显的混蛋.我还没有找到触发延迟的方法,因为在延迟结束时我需要调用自定义函数,而不是jquery函数.所以这是我的代码：

Driving Scene (called when choices begin animating out):

$('#interlude').animate({marginLeft: -viewportW + "px"},3000,'linear',function(){
    $('#interlude').remove();
    displayScene(sceneID); //need to figure out how to call this at the halfway point
});

最佳答案 在动画之前使用setTimeout()在第一个动画中途触发第二个动画.

var animateTime = 3000;
setTimeout("displayScene(" + sceneId + ")", animateTime / 2);
$('#interlude').animate({marginLeft: -viewportW + "px"},animateTime,'linear',function(){
    $('#interlude').remove();
});
点赞