基本特效

方法：                  说明

.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. 深刻剖析VuGen脚本录制原理

    扩展:深刻剖析VuGen脚本录制原理 LR中的VuGen组件,主要扮演一个proxy server的角色,在录制脚本时,记录下用户和服务器交互,然后自动生成脚本语言.在接下来的重放,或者大批量地加压时 ...

  2. 六十一 Web开发 使用Web框架

    由于用Python开发一个Web框架十分容易,所以Python有上百个开源的Web框架.这里我们先不讨论各种Web框架的优缺点,直接选择一个比较流行的Web框架——Flask来使用. 用Flask编写 ...

  3. java中常用的String方法

    1 length()字符串的长度 String a = "Hello Word!"; System.out.println(a.length); 输出的结果是字符串长度10. 2 ...

  4. 日志 log4net

    先引入log4net 接着配置configuration文件 <?xml version="1.0"?><configuration> <system ...

  5. gvim 编辑器配置

    "关才兼容模式 set nocompatible "模仿快捷键,如:ctrt+A 全选.Ctrl+C复制. Ctrl+V 粘贴等 source $VIMRUNTIME/vimrc_ ...

  6. Java九大内置对象

    Java九大内置对象    内置对象/作用域(每一种作用域的生命周期是不一样的):        1, application 全局作用域        2, session 会话作用域       ...

  7. Python开发基础-Day14正则表达式和re模块

    正则表达式 就其本质而言,正则表达式(或 re)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 ...

  8. run()和start()的区别

    run没有启新的线程,start方法才会调用Thread的native的start0方法,start0会调用run方法,开启新的线程,博主这么做,不是多线程顺序执行,而是把业务阻塞在主线程里.请打印: ...

  9. JZYZOJ1442 [noip2013]华容道 bfs 最短路 剪枝

    http://172.20.6.3/Problem_Show.asp?id=1442 想到最短路的简直神了,如果我写我大概只能写一个30分的bfs. 从数据范围可以看出思路是bfs剪枝,但这里的剪枝是 ...

  10. poj 3464(Trie)Approximations

    Approximations Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 419   Accepted: 23 Desc ...