1

確かに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
                    }
                });
            });
        });
4

2 に答える 2

1

アニメーションが終了した後に反転したい場合は、次のようなコールバックを追加します。

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

doneアニメーションが完了すると、関数はメソッドを呼び出します。だから今、あなたはそれを渡す必要があります：

moveToCenter(function() {
    // now the animation is done, move on
    $(this).flip({ //... etc
于 2012-11-27T12:36:33.580 に答える
1

試す：

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

センターアニメーションへの移動が完了するとすぐにコールバックを登録します。完了する前に行うと、奇妙な効果が生じる可能性がありますが、それでも十分に可能です.

少しの最適化: moveToCenter(this) と同様に、$('#flip') を再度使用する代わりに、flipElem に要素を渡します。

于 2012-11-27T13:03:50.213 に答える