缩放和定位图像效果

Question

这是我的小提琴

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

实际上我想要实现的是所有小红框一个接一个地放大到屏幕中心，然后缩小到原来的位置，然后放在灰色框内。

概念是所有小红框到底都会放在框架内。我愿意接受有关如何实现这一目标的任何建议。

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

查看更新后的fiddle