jQuery手風琴-懸停時展開和折疊div

Question

我已經創建了手風琴的基本實現，但是並沒有達到我想要的效果。

鏈接： 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)
                });
            });

這是我要復制的內容的鏈接。 這是沖刺的主頁。 http://www.sprint.com/mysprint/pages/sl/global/index.jsp

任何幫助，將不勝感激。

謝謝！

Answer 1

更新： 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);   

它的效果更好，但有時仍顯示較舊的內容。 正在修復。

Answer 2

不確定這是否是您想要的：

http://jsfiddle.net/mwqhp/1/

<div>
    <div class=" div4"></div>
    <div class=" div5"></div>
    <div class=" div6"></div>
    <div id="container">
        <div class="box div1"></div>
        <div class="box div2"></div>
        <div class="box div3"></div>
    </div>
</div>

和CSS

#container {
    margin-top: 20px;
    float: left;
    margin-left: -300px;
}
.box {
    width: 100px;
    height: 100px;
    display: inline-block;
}
.div1 {
    background: yellow;
    float: left;
}
.div2 {
    background: red;
    float: left;
}
.div3 {
    background: pink;
    float: left;
}
body>div {
    width: 800px;
}
.div4 {
    height:20px;
    width: 100px;
    background: yellow;
    float: left;
}
.div5 {
    width: 100px;
    height:20px;
    background: red;
    float: left;
}
.div6 {
    height:20px;
    width: 100px;
    background: pink;
    float: left;
}