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

Answer 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）

jQuery动画混淆行为

2 个答案: