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

2024-12-14 06:47:22

本文实例讲述了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动画效果animate和scrollTop结合使用实例

CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码
jquery animate 动画效果使用说明

animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就
Python实现类似jQuery使用中的链式调用的示例

关于jQuery的链式调用真正有意义的链式调用也就是方法链(method chaining).方法链这个词是有的,而且使用的很广泛.其实很多人口中的"链式调用"实际上就是指方法链.但是"链式调用"这个词语还可以描述函数调用链,所以让它自身的存在价值变得难以理解. 我总结的方法链的价值有这么几个: 1. 让调用过程更接近自然语言. 2. 把原本参数列表复杂的方法化作多个参数列表简单的方法来使用. 3. 减少不必要的代码量. 这个三点都是有益于开发的,所以方法链的存在
用jquery实现下拉菜单效果的代码

效果如下:这是菜单的内容,用ul标签实现菜单: 复制代码代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a>
jQuery的链式调用浅析

jQuery式的方法链核心部分是三点: 1)jquery的包装器函数(也就是jQuery(),以此来构建包装器对象),以此构造函数可以产生饱含了原生DOM对象的包装器对象. 它大概是这个样子的-(当然跟官方库的规模跟功能以及实现方式都差很多,我只是写了个大概的实现方式): 呃----我的失误,请大家如果有兴趣尝试下代码记得不要引入jQuery库,命名冲突了复制代码代码如下: (function(){ //简化起见不支持子类选择器属性选择器等等,只接受形如".className"或者
模仿jQuery each函数的链式调用

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l
jQuery简单tab切换效果实现方法

本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)
基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu
浅析jQuery的链式调用之each函数

话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子.浏览器的
基于jquery的模态div层弹出效果

经过几多周折,终于搞出来了,效果图如下: 具体实现: (1) 编写 jquery.divbox.js 的代码: 复制代码代码如下: jQuery.fn.extend( { OpenDiv: function() { var sWidth, sHeight; sWidth = window.screen.availWidth; if (window.screen.availHeight > document.body.scrollHeight) { sHeight = window.screen
Jquery代码实现图片轮播效果（一）

文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示下载源码首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播

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

相关推荐

随机推荐