基本特效

方法：                  说明

.show()              显示选中的元素

.hide()                隐藏选中的元素

.toggle()            在选中的元素上切换显示和隐藏的状态

淡入淡出效果

方法：                  说明

.fadeIn()           淡入选中元素使其变得不透明

.fadeOut()        淡出选中元素使其变得透明

.dadeTo()         修改选中元素的透明度

.fadeToggle()    使用透明度来隐藏或显示选中元素（切换其当前状态，若当前显示状态，则切换至隐藏状态）

滑动特效

方法：                  说明

.slideUp()         使用滑动特效来显示选中元素

.slideDown()    使用滑动特效来隐藏选中元素

.slideToggle()   使用滑动特效来切换选中元素（切换其当前状态，若当前显示状态，则切换至隐藏状态）

自定义特效

方法：                  说明

.delay()          延迟队列中操作的执行

.stop()           如果一个动画正在运行，就停止它

.animate()      创建自定义动画

下面是举例（下面例子要引入jquery的js文件才能看到效果，下面只提供引入代码，文件可以到官网下载：http://jquery.com）

例一：

html:

 <!DOCTYPE html>

 <html>

   <head>

     <title>jQuery</title>

     <!-- <link rel="stylesheet" href="css/mystyle.css" /> -->

     <style>

     body{

       background-color: #cccac8;

     }

     ul{

       list-style-type: none;

     }

     li{

       background-color: #fb7b0a;

       border: 1px solid #acacac;

     }

     </style>

   </head>

   <body>

     <div id="page">

       <h1 id="header">List</h1>

       <h2>Buy groceries</h2>

       <ul>

         <li id="one" class="hot"><em>fresh</em> figs</li>

         <li id="two" class="hot">pine nuts</li>

         <li id="three" class="hot">honey</li>

         <li id="four">balsamic vinegar</li>

       </ul>

     </div>

     <script src="js/jquery-2.2.3.js"></script>

     <script src="js/js7.js"></script>

   </body>

 </html>

js7.js:

 $(function() {

   $('h2').hide().slideDown();

   var $li = $('li');

   $li.hide().each(function(index) {

     $(this).delay(700 * index).fadeIn(700);

   });

   $li.on('click', function() {

     $(this).fadeOut(700);

   });

 });

例二：

html:和上面一样，把引用的js7.js替换成js8.js即可。

js8.js:

$(function() {

  $('li').on('click', function() {

    $(this).animate({

      opacity: 0.0,

      paddingLeft: '+=80'

    }, 500, function() {

      $(this).remove();

    });

  });

});

jquery中动画特效方法的更多相关文章

  1. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  2. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  3. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  4. jQuery中效果animate方法解决width是百分比出现的问题

    jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...

  5. 解决关于jquery中$.get(）方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法

    解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the ...

  6. jQuery中的join方法

    和JS 中的JOIN 方法一样,将一数组按照JOIN的参数连接起来.比如: var arr = [ "a", "b", "c", " ...

  7. jquery中的index方法

    问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2)  //调用者P1可以为对象或集合 参数为空,返回P1 ...

  8. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  9. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

随机推荐

  1. 关于DRY原则

    软件工程,模式,语言,设计思想发展到今天,说白了,所有的技巧,思想,原则归根结底都是为了这个DRY  从机器语言开始: 为了DRY,出现了汇编符号来代表指令,使开发人员不用“重复翻阅指令手册” 为了D ...

  2. Linux命令之whereis

    whereis [选项] [文件] (1).选项 -b 只搜索二进制文件 -B <目录> 只在路径下查找二进制文件 -m 只搜索man手册 -M <目录> 只在路径下查找man ...

  3. Html导出Pdf

    最近领导给了一个新的需求:给了我一个html页面,让我导出Pdf页面 由于以前没有搞过这方面的需求,所以查百度找资料,找了一大堆的好东西,像ItextSharp和wkhtmltopdf 废话不说,进入 ...

  4. BZOJ 4443 [Scoi2015]小凸玩矩阵（二分答案+二分图匹配）

    [题目链接]http://www.lydsy.com/JudgeOnline/problem.php?id=4443 [题目大意] 从矩阵中选出N个数,其中任意两个数字不能在同一行或同一列 求选出来的 ...

  5. 【枚举】【字符串哈希】Gym - 101164K - Cutting

    给你A B两个串,让你切B串两刀,问你能否把切开的三个串拼成A. 哈希显然. #include<cstdio> #include<cstring> using namespac ...

  6. 1.3（SQL学习笔记）计算字段及函数

    一.计算字段 1.1拼接字段 一般情况下返回的字段是指定列的属性名.如果有时我们对返回格式有特殊要求. 例如,我们需要将显示商品名,即商品价格,同时商品名后面的价格放在括号内. prod_name(p ...

  7. cocos2d-x解析xml时的Bug

    cocos2d-x中使用tinyxml解析xml配置.如下: tinyxml2::XMLDocument doc; if (tinyxml2::XML_SUCCESS != doc.LoadFile( ...

  8. 2016. 4.10 NOI codevs 动态规划练习

    1.codevs1040 统计单词个数 1040 统计单词个数 2001年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 De ...

  9. js 数字键盘

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Codeforces Gym 100269F Flight Boarding Optimization 树状数组维护dp

    Flight Boarding Optimization 题目连接: http://codeforces.com/gym/100269/attachments Description Peter is ...