Jquery Accordion - Expand and collapse div on hover

Question

I have created a basic implementation of the accordion but not close to what i want it to be.

Link: http://jsfiddle.net/mwqhp/

Jquery code:

$(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)
                });
            });

Here's the link to what i wanted to replicate from. This is the sprint's homepage. http://www.sprint.com/mysprint/pages/sl/global/index.jsp

Any help would be appreciated.

Thank you!

Answer 1

UPDATED: 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);   

It is working better but still sometimes shows older content. Working on fix.

Answer 2

Not sure if that's what you want:

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>

and 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;
}