javascript - 动画结束时执行动画

Question

我想在“动画”动画结束时执行“翻转”动画。我希望我创建的鱼将开始向左移动，然后进行翻转，然后再次向右游...

这是小提琴链接：http: //jsfiddle.net/TxC5y/7/

function anim() {
    $('.fish_wrap').animate({
     "left": "-90px"}, 5000);

}

anim();

function flip() {
      $('.fish_wrap').transition({
      perspective: '100px',
      rotateY: '180deg'
});
}

flip();

Answer 1

您可以添加一个回调.animate，它在完成时运行：

function anim() {
    $('.fish_wrap').animate({
     "left": "-90px"}, 5000, flip);
}

的回调语法.transition略有不同：

function flip() {
    $('.fish_wrap').transition({
      perspective: '100px',
      rotateY: '180deg',
      complete: back            // reverse the animation
    });
}

小提琴

Answer 2

在jQuery animate 调用中使用complete回调

function anim(callWhenDone) {
    $('.fish_wrap').animate({"left": "-90px"}, 5000, callWhenDone);
}

anim(flip);

function flip() {
      $('.fish_wrap').transition({
      perspective: '100px',
      rotateY: '180deg'
});
}