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 相关文章推荐
jquery实现提示语淡入效果
May 05 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jquery实现上传图片功能
Jun 29 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
You might like
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
新闻内页-JS分页
2006/06/07 Javascript
XENON基于JSON变种
2010/07/27 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python批量下载图片的三种方法
2013/04/22 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
经典大学生求职信范文
2014/01/06 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
邀请函模板
2015/02/02 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers