首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

JQuery特殊效果和链式调用操作示例

Posted in jQuery onMay 13, 2019

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

JQuery的特殊效果

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  .box{
   width: 300px;
   height: 300px;
   background-color: gold;
   display: none;
  }
 </style>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
  $(function () {
   $('#btn').click(function () {
    $('.box').fadeIn(1000,'swing',function () {
     //可以加一个回调函数
     alert('done');
    });
   })
  })
 </script>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
 <div class="box"></div>
</body>
</html>

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

链式调用-层级菜单

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  body{
   font-family: 'Microsoft Yahei';
  }
  body ul{
   margin: 0;
   padding: 0;
  }
  ul{
   list-style: none;
  }
  .menu{
   width: 300px;
   height: 300px;
  }
  .menu .level1,.menu li ul a {
   display: block;
   width: 300px;
   height: 30px;
   line-height: 30;
   text-decoration: none;
   background-color: #3366cc;
   color: #fff;
   font-size: 16px;
   text-indent: 10px;
  }
  .menu .level1{
   border-bottom: 1px solid #afc6f6;
  }
  .menu li ul a {
   font-size: 14px;
   text-indent: 20px;
   background-color: #7aa1ef;
  }
  .menu li ul li{
   border-bottom: 1px solid #afc6f6;
  }
  .menu li ul {
   display: none;
  }
  .menu li ul li a:hover{
   background-color: #f6b544;
  }
 </style>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(function () {
   $('.level1').click(function () {
    $(this).next().stop().slideToggle().parent().sibling().children('ul').slideUp();
   })
  })
 </script>
</head>
<body>
 <ul class="menu">
  <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" class="level1">水果</a>
   <ul class="current">
    <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>
    <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>
    <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>
    <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>
   </ul>
  </li>
  <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" class="level1">海鲜</a>
   <ul>
    <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>
    <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>
    <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>
    <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>
   </ul>
  </li>
  <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" class="level1">肉类</a>
   <ul>
    <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>
    <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>
    <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>
   </ul>
  </li>
 </ul>
</body>
</html>

链式调用：

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

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

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

JQuery特殊效果和链式调用操作示例

- Author -

SpecYue

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jquery replace方法去空格
May 08 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jquery拖动改变div大小
Jul 04 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 #jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 #jQuery
详解jQuery如何实现模糊搜索
May 10 #jQuery
主题(1) Springboot-cli(1) 异步回调(1) 底部导航(1) ForkJoin(1) CompletableFuture(1) format(1) FutureTask(3) 对齐打印(1) JAVA(88)
You might like
php实现约瑟夫问题的方法小结
2015/03/23 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
双十佳事迹材料
2014/01/29 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
授权委托书
2014/07/31 职场文书
党支部工作总结2015
2015/04/01 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
Go并发4种方法简明讲解
2022/04/06 Golang