jquery - 画像効果のスケーリングとポジショニング

Question

これは私のフィドルです

http://jsfiddle.net/ocinisme/vqAwJ/5/

実際に私が達成したいのは、すべての小さな赤いボックスを1つずつ画面の中央に拡大し、次に元の位置に縮小してから、灰色のフレーム内に配置することです。

コンセプトは、最後にあるすべての小さな赤いボックスがフレーム内に配置されることです。私はこれを達成する方法についての提案を受け入れます。

Answer 1

あなたが実際にこの行動を意味するかどうかはわかりませんが、

$('button').on('click', function() {
    $('button').attr('disabled', 'true');
    $('#a').animate({
        width: '100px',
        height: '100px',
    }, 1500, 'linear', function() {
        $('#a').animate({
            width: '30px',
            height: '30px',
        }, 1500, 'linear', function() {
            $('#a').animate({
                top: '165px',
            }, 1500, 'linear', function() {
                $('#b').animate({
                    width: '100px',
                    height: '100px',
                }, 1500, 'linear', function() {
                    $('#b').animate({
                        width: '30px',
                        height: '30px',
                    }, 1500, 'linear', function() {
                        $('#b').animate({
                            top: '205px',
                        }, 1500, 'linear', function() {
                            $('#c').animate({
                                width: '100px',
                                height: '100px',
                            }, 1500, 'linear', function() {
                                $('#c').animate({
                                    width: '30px',
                                    height: '30px',
                                }, 1500, 'linear', function() {
                                    $('#c').animate({
                                        top: '245px',
                                    }, 1500, 'linear');
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

</ p>

更新されたフィドルを見てください