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

更新时间：2019年05月13日 12:01:04 作者：SpecYue

这篇文章主要介绍了JQuery特殊效果和链式调用操作,结合实例形式分析总结了jQuery各种常见显示效果与所使用的函数,以及链式调用显示层级菜单功能相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

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

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

您可能感兴趣的文章:

JQuery调用WebServices的方法和4个实例
你是不是经常作这种开发，前端用JS写逻辑，后端用aspx或者ashx作服务？你是不是经常在请求aspx的时候在查询字符串中拼接诸如a.aspx?method=getDepartmetn&param1=1&param2=2的字符串？
2014-05-05
简单几步实现返回顶部效果
本文分享了网页中经常出现的返回顶部效果，相比原生Javascript,jquery实现起来能够省略不少代码。希望对大家有所帮助
2016-12-12
jQuery判断元素是否显示是否隐藏的简单实现代码
下面小编就为大家带来一篇jQuery判断元素是否显示是否隐藏的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
DIV外区域Click后关闭DIV的实现代码
首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根
2011-12-12
JQuery 实现文件下载的常用方法分析
这篇文章主要介绍了JQuery 实现文件下载的常用方法,结合实例形式分析了jQuery的GET方式、POST方式及HTML5 Blob对象等常见的文件下载机制、原理与实现方法,需要的朋友可以参考下
2019-10-10
jQuery实现的无限级下拉菜单功能示例
这篇文章主要介绍了jQuery实现的无限级下拉菜单,涉及jQuery事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
2016-09-09
浅析jQuery中使用$所引发的问题
这篇文章主要介绍了浅析jQuery中使用$所引发的问题的相关资料,f非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
2种jQuery 实现刮刮卡效果
这篇文章主要介绍了2种jQuery 实现刮刮卡效果,需要的朋友可以参考下
2015-02-02
使用jQuery validate 验证注册表单实例演示
Validation是jQuery的插件，提供的方法可以大大简化验证表单的工作，接下来为大家详细介绍下使用方法，感兴趣的各位可以参考下哈
2013-03-03
jQuery 前的按键判断代码
刚看到个问题，如何得知同时按下了哪几个键以及按键顺序（难道是格斗游戏的组合键？），其实jQuery实现起来是很简单的。
2010-03-03