动画结束时执行动画

Question

我希望在“动画”动画结束时执行“翻转”动画。 我希望我创造的鱼会开始向左移动，然后翻转ans会再次游到右边......

这里是小提琴链接：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
    });
}

Fiddle

Answer 2

使用jQuery animate call

中的complete回调

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

anim(flip);

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