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>

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery实现页面详情展开收起

jQuery实现页面详情展开收起 .detailpd { padding-top:10px; } // 显隐项目介绍详情 $(function view_details_click(){ ...

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

$(function() {     $("#toggle").click(function() {         $(this).text($("#conten...

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

Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; li...

jquery特效-鼠标点击上下伸缩式菜单

jquery特效-鼠标点击上下伸缩式菜单             *{padding:0px;margin:0px;} .nav{width:210px; b...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery实现更多内容的(展开/收起 功能)

$(document).ready(function(){ $("#clickBox").click(function(){ var is_open = $("#moreCont").css("d...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery实现:列表展开与收缩

话不多说,大家请看代码 先看html代码,以照相机为例子: (别忘了引入jquery文件) 佳能(3...

jquery 折叠&展开

使用jquery实现的折叠展开源码,供以后参考使用。 var flag = 1; $(document).ready(function(){ $(".flip").click(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现DIV层的收缩展开效果
举报原因:
原因补充:

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