【jquery】鼠标滑动上向上缓慢弹出显示隐藏层

鼠标滑动上向上缓慢弹出显示隐藏层

demo:

DWCS6软件的新特性

1.增加移动平台设置

2.增加移动平台设置

3.增加移动平台设置

4.增加移动平台设置

html代码如下：

<div id="box">
<img src="img/dwcs6_02.jpg" />
<dl>
<dt>DWCS6软件的新特性</dt>
<dd>1.增加移动平台设置</dd>
<dd>2.增加移动平台设置</dd>
<dd>3.增加移动平台设置</dd>
<dd>4.增加移动平台设置</dd>
</dl>
<p>CS6官方公布的亮点有网友戏言说，目前世界上“最好的化妆品”是一款叫做PhotoShop的产品，它可以帮你去除所有你不满意的地方。上周末，这款最好的化妆品推出了第十三代产品的试用装——PhotoShop CS6Beta，所有感兴趣的用户都可以免费下载试用。注意：安装CS6 Beta的时候请选。</p>
</div>

js代码如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('#box').hover(function() {
$(this).children('p').slideDown(200);
}, function() {
$(this).children('p').slideUp(100);
});
});
</script>

css代码如下：

<style type="text/css">
@charset "utf-8";
dl,dt,dd,img,p{ margin:0; padding:0;}
#box{ width:500px; height:260px; margin:0 auto; border:1px solid #999; background:#ccc; position:relative;}
#box img{ float:left; margin-right:10px; display:inline;}
#box dl{ width:200px; margin-top:55px; float:left;}
#box dl dt{width:200px; height:30px; font:bold 16px/30px; float:left;}
#box dl dd{width:200px; height:24px; font:bold 14px/24px; float:left;}
#box p{width:460px; height:220px; position:absolute; left:0; bottom:0; opacity:0.6; background:#000; padding:20px; font:normal 14px/1.5 "宋体"; color:#fff; letter-spacing:2px; display:none; }
</style>