Javascript jQuery动画化混乱的行为

我承认对jQuery不太熟悉，但我懂一点javascript，我正在尝试用几个动画来制作一个div的动画

我希望div首先移动到页面的中心 然后我希望它在到达中心后翻转，然后展开

我遇到的问题是使用

.animate（）

方法更改div的

顶部

和

左侧

属性以使其位于中间

---

问题是moveToCenter函数中的.animate方法实际上并没有将移动设置为中心动画，它只是跳过动画部分（属性更改，但更改未设置动画），然后继续翻转和其他部分

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

它（如果有的话）是如何修复的

---

HTML文件

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

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

---

如果要在动画完成后翻转，请添加如下回调：

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

动画完成后，该函数将调用

done

方法。所以现在你只需要通过它：

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

尝试：

移动到中心动画完成后立即注册回调。如果你在它完成之前这样做，它可能会有奇怪的效果，但无论如何，这是很有可能的

---

小优化：将元素传递给Fliplem，而不是再次使用$（“#flip”），类似于moveToCenter（this）

为什么需要添加回调？我的意思是，即使函数异步执行，它也应该同时移动和翻转。不仅仅是跳过动画。发生了什么事？我的印象是你想在动画结束后翻页，并引用：“我希望div首先移动到页面的中心，然后我希望它翻页”是的，这是正确的。我要问的是为什么没有回调它就不能工作。问题是，即使是不同的假设，输出也没有意义。所以我想说的是，如果函数没有按顺序执行（这是我在编写代码时最初假设的），即不等待前一个函数完成执行，那么这意味着两个函数应该同时运行，这意味着同时移动和翻转，但事实似乎并非如此。@ayos如果认为插件可以很好地与正在进行的动画配合使用，那就有点天真了。你可以问“为什么”，但既然你不想这么做，我建议你开始考虑回调中的动画序列。你是对的，但我仍然难以决定在哪里使用回调以及简单的排队将在哪里工作。似乎@David比我快；-）

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

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

        }
    });
}

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

$(document).ready(function() {
    $('#flip').click(function() {
        moveToCenter(this);
    });
});​