JQUERY实现左侧技巧滑进滑出效果示例

左侧提示滑进滑出平滑效果，各位童鞋如果遇到类似效果可以应用

JQUERY代码：复制代码代码如下： //左侧浮动$('.阅读')。悬停(function(){ $(this)).动画({ left : ' 50 ' })；$('.读作')。动画({left:'0'}，600)；});$('.read _ close’).单击(函数(){ $(').读作')。动画({left:'-287'}，600)；$('.阅读')。动画({left:'0'}，800)；});HTML:复制代码代码如下：-左侧浮动-div class=' reading ' a target=' _ blank ' img src=' http :/CSS。87504 .cn/images/business/read 01。gif '/a/div class=' read ' a target=' _ blank ' class=' read _ close ' img src=' http :/CSS。87504 .cn/images/business/icon _ close。gif '/a p您可以订阅生意街商机话题，您会通过邮箱收到栏目最新内容/p p class=' read _ BTN ' a href=' # ' target=' _ blank ' img src=' http :/CSS。87504 .cn/images/business/read 02。gif '/a/p/div CSS :复制代码代码如下：读数{ position : fixed left :0 pxbottom :30 pxcursor : pointer指针；宽度：25 pxheight :75 px _ position : absolute/兼容IE6 _ top :表达式(eval(文档。文档元素。滚动顶部文档。文档元素。客户身高-这个。偏置thight-(parsent(this。当前样式。页边距顶部，10)| | 0)-(parsent(this。当前样式。边距底部，30)| | 0))；在…之前类=css名称='代码'//兼容IE6，距离底部30/PRE} .读取{边框：1 px实心# d0d 0；宽度宽度：285px高度：100 px-moz-box-shadow :0 px 1px 2px # CCC；-web套件-box-shadow :0 px 1px 2px # CCC；盒影：0 px 1px 2px # CCC//阴影效果，CSS3background: # fff位置：固定；左侧：-287 px；底部：30pxz索引：10;_ position : absolute _ top :表达式(eval(文档。文档元素。滚动顶部文档。文档元素。客户身高-这个。偏置thight-(parsent(this。当前样式。页边距顶部，10)| | 0)-(parsent(this。当前样式。边距底部，30)| | 0))；}.读取p { font-size :14 px线高：22 pxpadding:15px 0 0 16px宽度宽度：240px}。读取p . read _ BTN { text-align :右；填充-top:5px} .read _ close { float : right padd :2 xcursor : pointer指针；}P/P PRE/PRE BR BR P/P PBR /P