jQuery动画令人困惑的行为答案

【问题标题】：jQuery animate confusing behaviourjQuery动画令人困惑的行为
【发布时间】：2012-11-27 12:33:05
【问题描述】：

诚然，我是 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>

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
                    }
                });
            });
        });

【问题讨论】：

标签： javascript jquery jquery-ui jquery-animate

【解决方案1】：

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

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

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

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

【讨论】：

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

【解决方案2】：

试试：

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);
    });
});

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

小优化：将元素传递给flipElem，而不是再次使用$('#flip')，类似于moveToCenter(this)

【讨论】：

似乎@David 打败了我 ;-)