Jquery实现由下向上展开的效果

清远大学城网(http://www.qydxc.com)
常见的做向下展开的效果很简单,直接用slideUp跟slideDown就行。如果要展开的div是通过position:absolute绝对定位的,且通过相对与底部定位,如bottom:0px 这个时候调用slideDown就是向上展开的。 (因为slideDown说白了就是动态改变元素高度,底部定位固定,高度变高的时候就向上扩展了) 代码如下 复制代码 //精品推荐 $('.remm_product ul li').hover( function(){ $(this).find('.p_info').slideDown(); }, function(){ $(this).find('.p_info').slideUp(); } ) jquery slidetoggle也可以实现内容缓慢展开和收起的操作。 代码如下 复制代码 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>Eiege.com</p> <p>jquery专栏,学习和交流。Eiege专栏</p> </div> <p class="flip">请点击这里</p> </body> </html> jQuery 拥有以下滑动函数: $(selector).slideDown(speed,callback):把内容从上向下展开 $(selector).slideUp(speed,callback):把内容从下向上收起 $(selector).slideToggle(speed,callback):内容上下方向的收起和展开 speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。