基本特效

方法：                  说明

.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. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  2. POJ 1860 Currency Exchange【SPFA判环】

    Several currency exchange points are working in our city. Let us suppose that each point specializes ...

  3. HRBUST 1212 乘积最大

    $dp$,大数运算. $dp[i][j]$表示到$i$位置切成了$j$段的最大收益.数字爆$longlong$,$Java$上大数. import java.math.BigInteger; impo ...

  4. DOS中的CD命令详解

    CD命令是改变子目录的命令.格式:CD [路径] . 值得明确的是:CD命令只能进入当前盘符中的文件夹,改变操作的根目录(改变操作盘符),则不需用cd.例如你当前是在c:盘下,要到d:盘,只需键入d: ...

  5. java汉字获取首字母

    前言 在项目中很多时候我们需要获取姓名或者名称的首字母或者全拼,以用于模糊查询或者字母查询,在这里分享一个实例:供小伙伴们参考. 导入jar包 <dependency> <group ...

  6. webpack2 热加载js 文件

    如果只要普通的热加载 只要如下配置就好了 package.json { "devDependencies": { "webpack": "^2.6.1 ...

  7. PMP CMM

    CMM和PMP是两个不同的概念域,是用来解决不同问题的.我们所说的CMM,准确的说应该是叫做能力成熟度模型,北京猴子说的软件能力成熟度模型实际上应该称为SW-CMM,是CMM的一个子集.PMP可以看做 ...

  8. 【数位dp】【二分】Gym - 101411H - Hotel in Ves Lagos

    数位dp预处理之后,可以容易得到f(x),代表小于等于x的数中,有多少个不含13的.然后就能二分答案啦. #include<cstdio> #include<iostream> ...

  9. 【区间dp】【四边形不等式】CDOJ1653 最小生成树？

    四边形不等式优化的资料去网上找下吧!很多. 可以证明,这个题里面,合并的代价满足较小区间+较大区间<=交错区间. 可以自己画个图看看. #include<cstdio> #inclu ...

  10. C# 高德地图调用帮助类 GaodeHelper

    /// <summary> /// 高德地图调用帮助类 /// 更多详情请参考 高德api /// </summary> public class GaodeHelper { ...