基本特效

方法：                  说明

.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. LOJ #6284. 数列分块入门 8-分块(区间查询等于一个数c的元素，并将这个区间的所有元素改为c)

    #6284. 数列分块入门 8 内存限制:256 MiB时间限制:500 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: hzwer 提交提交记录统计测试数据讨论 2   题目描述 给出 ...

  2. POJ 1062 昂贵的聘礼 【带限制的最短路/建模】

    年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请求酋长降低要求.酋长说:" ...

  3. window10 Powershell使用curl命令报错解决方法

    报错信息:curl : 无法分析响应内容,因为 Internet Explorer 引擎不可用,或者 Internet Explorer 的首次启动配置不完整.请指定 UseBasicParsing ...

  4. java Integer parseInt()

    先来一段代码,代码很简单的,如下: public static void main(String[] args) { Integer a = Integer.parseInt("3" ...

  5. Find K Pairs with Smallest Sums -- LeetCode

    You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...

  6. JZYZOJ1369 [coci2012]覆盖字符串 AC自动机

    http://172.20.6.3/Problem_Show.asp?id=1369 trie树如果不优化就这么往里面放这么多单词肯定超空间+超时,所以需要去掉无用的字符串(不属于原字符串的),但是一 ...

  7. 【分类讨论】【set】Codeforces Round #407 (Div. 2) B. Masha and geometric depression

    模拟一下那个过程,直到绝对值超过l,或者出现循环为止. 如果结束之后,绝对值是超过l的,就输出当前写在黑板上的数量. 如果出现循环,则如果写在黑板上的数量非零,则输出inf(注意!如果陷入的循环是一个 ...

  8. 基于socket的udp传输，socketserver模块，进程

    基于UDP的套接字 udp是无连接的,先启动哪一端都不会报错 socket.SOCK_DGRAM 数据报协议 udp不会发送空数据,什么都不输入直接发送也会有报头发过去 服务端 import sock ...

  9. 找出N个数中最小的k个数问题(复杂度O(N*logk))

    这是一个经典的算法题,下面给出的算法都在给定的数组基础上进行,好处时不用分配新的空间,坏处是会破坏原有的数组,可以自己分配新的空间以避免对原有数组的破坏. 思路一 先直接排序,再取排序后数据的前k个数 ...

  10. mysql函数的使用create function myfunction(...

    use test   //必须在某个数据库下面创建 delimiter $ //创建 CREATE FUNCTION myFunction(ln int, ls int)   //参数这里不能加def ...