本文的例子告诉我们，jQuery实现了从下往上扩展DIV响应鼠标的效果。分享给大家参考，如下：

鼠标浮动时从下向上慢慢展开div的效果

1.演示效果(鼠标浮动时div从下往上展开，浮动后div从上往下折叠)

2.密码

！doctype html townleta charset=' utf-8 ' title www.jb51.net jquery响应鼠标从下向上展开div/title style type=' text/CSS '。大{位置：相对；宽度width:234px高度：300 px；background:#ccc}。显示{ position:absolutedisplay:nonebottom:0px显示：块；宽度：100%；height:autobackground : # f66 }/style script src=' http :3358 libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $(文档)。ready(function() { $(')。大’)。hover(function () { $(')。show’)。停止(真，真)。动画({ height : ' 70px ' })；}，function () { $('。show’)。停止(真，真)。动画({ height : ' 0px ' })；});});/剧本/床头柜！-灰色div-div class='大'！-红色div-div class=' show '/div/div/body/html原则：

(1)首先，红色div由position:absolute绝对定位，相对于底部定位，如bottom:0px。(2)底部固定，高度变高时向上膨胀。使用jQuery的$()。animate()动画方法控制红色div的高度变化。

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。