jQuery实现DIV层的收缩展开效果

原创 2015年05月30日 20:25:15

有的时候我们需要这样一个效果,当鼠标悬浮在一个位置上时,这个悬浮事件会触发一个动画,jQuery实现的动画可以使得整体效果流程优美

<!DOCTYPE html>
  <head>
    <title>jQuery实现DIV层的收缩展开效果-纵向</title>
    <meta charset="utf-8">
    <script src="C:/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <style>

      .text{
        line-height:22px;
        padding:0 6px;
        color:#666;
      }/*展开时看到的div详情*/

      .box h1{
        padding-left:10px;
        height:22px;
        line-height:22px;/*line-heigt的属性值与height属性值设置成同一个值,实现文字垂直居中*/
        background:#f1f1f1;
        font-weight:bold;
      }

      .box{
        position:relative;
        border:1px solid #e7e7e7;/*设置边框,突出显示隐藏层*/
      }

    </style>

  </head>

  <body>
    <script type="text/javascript">
      // 收缩展开效果
      $(document).ready(function(){
         $(".box h1").hover(function(){
           $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");/*.animate()是jQuery的动画函数,在此,我们可以修改DOM元素的CSS样式,实现元素的动态改变*/
         }
         ,
         function(){
          $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
         });
      });
    </script>

    <div class="box">
      <h1>收缩展开效果</h1>
      <div class="text">
              <span>only for test </span><br />
              <span>only for test </span><br />
              <span>only for test </span><br />
              <span>only for test </span><br />
              <span>only for test </span><br />
      </div>
      </div>
      <br />

    </div>
    <br>
  </body>
</html>

用Jquery点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.

$(function() {     $("#toggle").click(function() {         $(this).text($("#conten...
  • Snail___
  • Snail___
  • 2014年07月22日 13:37
  • 7128

jQuery实现页面详情展开收起

jQuery实现页面详情展开收起 .detailpd { padding-top:10px; } // 显隐项目介绍详情 $(function view_details_click(){ ...
  • u013372487
  • u013372487
  • 2015年11月11日 15:17
  • 5540

jQuery展开收缩效果

  • 2015年08月13日 12:48
  • 71KB
  • 下载

jquery实现ul_li菜单展开收起效果

  • 2013年09月06日 12:07
  • 773B
  • 下载

jquery css 展开 收起 效果 仿京东

  • 2016年08月15日 16:43
  • 36KB
  • 下载

html Div层的展开与收缩的特效源代码下载

html Div层的展开与收缩的特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463332338688.htm...
  • springmvc_springdata
  • springmvc_springdata
  • 2014年08月26日 09:32
  • 2424

Jquery点击展开-点击收缩

菜单点击展开-点击收缩 jquery展开、收缩 // 收缩展开效果 $(document).ready(function(){ $(".box h2").toggle(functi...
  • u010081710
  • u010081710
  • 2017年07月12日 18:15
  • 387

Jquery实现如何实现DIV由下向上展开的效果,鼠标浮动时div由下向上缓慢展开。

鼠标浮动时div由下向上缓慢展开效果 演示效果:1:鼠标浮动前2:鼠标浮动后:(div由下向上展开)代码: 无标题文档 .big{position:relative; width:2...
  • qq_36410795
  • qq_36410795
  • 2017年05月29日 02:48
  • 1106

jquery实现:列表展开与收缩

话不多说,大家请看代码 先看html代码,以照相机为例子: (别忘了引入jquery文件) 佳能(3...
  • zzp961224
  • zzp961224
  • 2016年08月07日 22:30
  • 1006

Jquery实现的一个DIV层面板的折叠/展开效果

Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; li...
  • qq_32340877
  • qq_32340877
  • 2017年01月08日 15:09
  • 3355
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现DIV层的收缩展开效果
举报原因:
原因补充:

(最多只允许输入30个字)