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>

【HTML】- 实现展开与收起效果

javascript和jQuery分别实现实现展开与收起动画效果
  • baidu_35701759
  • baidu_35701759
  • 2017-07-27 14:25:07
  • 3826

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:05
  • 4167

CSS+JS实现一个DIV层的展开折叠效果

  • 2017年09月01日 14:06
  • 13KB
  • 下载

jquery实现:列表展开与收缩

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

Jquery点击展开-点击收缩

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

jQuery展开收缩效果

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

js 实现 div的折叠效果

  • 2010年03月31日 11:23
  • 2KB
  • 下载

【网页】div折叠效果的实现

  • 2013年06月23日 13:29
  • 2KB
  • 下载

jQuery实现页面详情展开收起

jQuery实现页面详情展开收起 .detailpd { padding-top:10px; } // 显隐项目介绍详情 $(function view_details_click(){ ...
  • u013372487
  • u013372487
  • 2015-11-11 15:17:27
  • 6100
收藏助手
不良信息举报
您举报文章:jQuery实现DIV层的收缩展开效果
举报原因:
原因补充:

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