javascript - jQuery 动画混淆行为

Question

诚然，我是 jQuery 的新手，但我知道一点 javascript，我正在尝试使用几个动画为 div 设置动画。

我想让div先移到页面中央 然后我想让它在到达中心后翻转然后展开。

我遇到的问题是使用 .animate() 方法更改 div 的 top 和 left 属性以获取它到中心。

---

问题是 moveToCenter 函数中的 .animate 方法实际上并没有为移动到中心设置动画，它只是跳过动画部分(属性变化，但变化不是动画)并继续进行翻转和休息

谁能告诉我为什么会这样/我哪里出错了？

如何解决(如果有的话)？

---

HTML

<div id="flip" style="background-color:#ff0000;
               width:200px;
               height:200px;
               position:absolute">

  <h4> printf("Hello World"); </h4>
</div>

JS

function moveToCenter()
{
    $('#flip').animate({'top':'300','left':'300'});
}

$(document).ready(function() {
    $('#flip').click( function() {

            moveToCenter(); //function that is supposed to moves the div to the center

            $(this).flip({
                    content: 'Scanf()',
                    color: '#00FF00',
                    direction: 'lr',
                    onEnd:  function(){ $('#flip').animate({ 
                    'height' : '400', 'width': '300'
                    }       
                    ,'500','swing');

                    lol(); //Another function that does some other animations
                    }
                });
            });
        });

Answer 1

如果你想在动画完成后翻转，添加这样的回调:

function moveToCenter(done){
    $('#flip').animate({'top':'300','left':'300'}, done);
}

该函数将在动画完成时调用done 方法。所以现在你只需要传递它:

moveToCenter(function() {
    // now the animation is done, move on
    $(this).flip({ //... etc