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

最新推荐文章于 2020-03-14 12:02:08 发布

weixin_33747129

最新推荐文章于 2020-03-14 12:02:08 发布

阅读量373

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/wenson/p/3322413.html

版权

清远大学城网（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" 或毫秒。

转载于:https://www.cnblogs.com/wenson/p/3322413.html

weixin_33747129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现由下向上展开的效果

清远大学城网（http://www.qydxc.com）常见的做向下展开的效果很简单，直接用slideUp跟slideDown就行。如果要展开的div是通过position:absolute绝对定位的，且通过相对与底部定位，如bottom:0px 这个时候调用slideDown就是向上展开的。（因为slideDown说白了就是动态改变元素高度，底部定位固定，高度变高的时候就向上扩展了...
复制链接

扫一扫