javascript - Jquery Accordion - 悬停时展开和折叠 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)
                });
            });

这是我想要复制的链接。这是 sprint 的主页。 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;
}