Javascript Jquery Accordion-悬停时展开和折叠div

我已经创建了一个基本的手风琴实现，但并没有接近我想要的

链接：

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的主页。

任何帮助都将不胜感激

---

谢谢大家!

不确定这是否是您想要的：

更新：

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

---

它工作得更好，但有时仍显示较旧的内容。正在修复

看起来你已经实现了相同的功能，除了淡出。你到底还想做什么？你想让矩形向上生长并位于底部吗？@ChristopherMarshall-我想让它向上而不是向下，并能够淡出以显示不同的内容。就像它在Sprint站点中的实现一样，但我无法复制它。有什么帮助吗？@Sergio有，打开盒子时可以显示内容。谢谢你的回复。你能打绿色的复选标记来回答我的问题吗？我想OP想要的是底部的框，向上打开。你是说底部的固定div和顶部的扩展div？不，只有3个框，从页面底部开始生长。就像贴的网址一样。是的，如果可能的话。谢谢你们的回复。我真的很感激。哦，好的，我很抱歉我看到了导航-我向汉克斯道歉@希瓦姆-你能防止内容弹出吗？当我将这三个从左向右悬停时，内容不断地跳进跳出好几次。但这似乎可以做到。你能不能在原始状态下显示不同的内容，在悬停和展开时显示不同的内容？我用我当前的进度更新了小提琴。仍在修复快速悬停显示的旧内容错误。我可以建议为所有三个框添加一个设置宽度吗？意思是当盒子膨胀时不必向外推盒子。嗯，这是我目前能做的最好的了：）。我相信我提供的脚本回答了你的问题&应该让你在继续这个项目上有一个良好的开端。

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

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