我已经创建了手风琴的基本实现,但并不接近我想要的.

链接：
http://jsfiddle.net/mwqhp/

Jquery代码：

$(function () {
                $('.box').hover(function () {
                    $(this).stop(true,true).animate({
                        width: '+=300',
                        height: '+=300'
                    }, 500);
                }, function () {
                    $(this).stop(true,true).animate({
                        width: '-=300',
                        height: '-=300'
                    },500)
                });
            });

这是我想复制的链接.这是sprint的主页.
http://www.sprint.com/mysprint/pages/sl/global/index.jsp

任何帮助,将不胜感激.

谢谢！

最佳答案 更新时间：
jsFiddle

(function($) {
    $('.box').hover(function() {

        $this = $(this),
        $oC = $this.find('.oldContent'),
        $nC = $this.find('.newContent');

        $oC.stop(true, true).fadeOut('fast');

        $this.stop(true, true).animate({
            width: '+=300',
            height: '+=300',
            bottom: '+=300'
        }, function() {
            $nC.fadeIn('fast');
        });

    }, function() {

        $nC.stop(true, true).fadeOut('fast');

        $this.stop(true, true).animate({
            width: '-=300',
            height: '-=300',
            bottom: '-=300'
        }, function() {
            $oC.fadeIn('fast');
        });

    });

})(jQuery);   

它工作得更好但有时仍显示较旧的内容.致力于修复.