经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery特殊效果和链式调用操作示例
来源：jb51　　时间：2019/5/14 8:32:32　　对本文有异议

本文实例讲述了JQuery特殊效果和链式调用操作。分享给大家供大家参考，具体如下：

JQuery的特殊效果

fadeOut()淡入
fadeToggle()切换淡入淡出
hide() 隐藏元素
show() 现实元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle()依次展开或者卷起某个元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Title</title>
  6.  <style type="text/css">
  7.   .box{
  8.    width: 300px;
  9.    height: 300px;
  10.    background-color: gold;
  11.    display: none;
  12.   }
  13.  </style>
  14.  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  15.  <script>
  16.   $(function () {
  17.    $('#btn').click(function () {
  18.     $('.box').fadeIn(1000,'swing',function () {
  19.      //可以加一个回调函数
  20.      alert('done');
  21.     });
  22.    })
  23.   })
  24.  </script>
  25. </head>
  26. <body>
  27. <input type="button" name="" value="动画" id="btn">
  28.  <div class="box"></div>
  29. </body>
  30. </html>
  31.  

点击按钮，元素淡出，完成之后弹出done，不知道为什么，没有运行出来，可能是浏览器的问题。

链式调用-层级菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Title</title>
  6.  <style type="text/css">
  7.   body{
  8.    font-family: 'Microsoft Yahei';
  9.   }
  10.   body ul{
  11.    margin: 0;
  12.    padding: 0;
  13.   }
  14.   ul{
  15.    list-style: none;
  16.   }
  17.   .menu{
  18.    width: 300px;
  19.    height: 300px;
  20.   }
  21.   .menu .level1,.menu li ul a {
  22.    display: block;
  23.    width: 300px;
  24.    height: 30px;
  25.    line-height: 30;
  26.    text-decoration: none;
  27.    background-color: #3366cc;
  28.    color: #fff;
  29.    font-size: 16px;
  30.    text-indent: 10px;
  31.   }
  32.   .menu .level1{
  33.    border-bottom: 1px solid #afc6f6;
  34.   }
  35.   .menu li ul a {
  36.    font-size: 14px;
  37.    text-indent: 20px;
  38.    background-color: #7aa1ef;
  39.   }
  40.   .menu li ul li{
  41.    border-bottom: 1px solid #afc6f6;
  42.   }
  43.   .menu li ul {
  44.    display: none;
  45.   }
  46.   .menu li ul li a:hover{
  47.    background-color: #f6b544;
  48.   }
  49.  </style>
  50.  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  51.  <script type="text/javascript">
  52.   $(function () {
  53.    $('.level1').click(function () {
  54.     $(this).next().stop().slideToggle().parent().sibling().children('ul').slideUp();
  55.    })
  56.   })
  57.  </script>
  58. </head>
  59. <body>
  60.  <ul class="menu">
  61.   <li>
  62.    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="level1">水果</a>
  63.    <ul class="current">
  64.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
  65.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >梨子</a></li>
  66.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >葡萄</a></li>
  67.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >火龙果</a></li>
  68.    </ul>
  69.   </li>
  70.   <li>
  71.    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="level1">海鲜</a>
  72.    <ul>
  73.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >鱼</a></li>
  74.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >扇贝</a></li>
  75.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >龙虾</a></li>
  76.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >象牙蚌</a></li>
  77.    </ul>
  78.   </li>
  79.   <li>
  80.    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="level1">肉类</a>
  81.    <ul>
  82.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >牛肉</a></li>
  83.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >猪肉</a></li>
  84.     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >肌肉</a></li>
  85.    </ul>
  86.   </li>
  87.  </ul>
  88. </body>
  89. </html>
  90.  

链式调用：

level1的下一级淡入淡出，返回上一级的，孩子隐藏。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jquery相关内容感兴趣的读者可查看jb51专题：《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》

希望本文所述对大家jquery程序设计有所帮助。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号