jquery - 缩放和定位图像效果

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

​</p>

看看更新的小提琴