基本特效

方法：                  说明

.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. Ace Admin 学习笔记

    1. jqGrid  提交编辑数据,控制台报:Synchronous XMLHttpRequest on the main thread... jqGrid的选项设置async: true选项: aj ...

  2. 2. 创建一个简单的Maven项目

    ☞ 创建项目 选定一个目录,如E:\workspace\maven,新建的项目将放在这个目录. 运行CMD,切换到该目录. 执行mvn archetype:generate直到输出"Choo ...

  3. 【BZOJ 1004】 1004: [HNOI2008]Cards （置换、burnside引理）

    1004: [HNOI2008]Cards Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很 ...

  4. Codeforces Round #448(Div.2) Editorial ABC

    被B的0的情况从头卡到尾.导致没看C,心情炸裂又掉分了. A. Pizza Separation time limit per test 1 second memory limit per test ...

  5. [转]tx:advice标签简介

    <Spring高级程序设计>第16章事务管理,通过本章的学习,你知道了如何使用Spring去管理事务,而这种方式几乎不会对你的源代码产生任何影响.你现在知道了如何使用本地和全局事务,并知道 ...

  6. Codeforces Round #345 (Div. 1) A - Watchmen 容斥

    C. Watchmen 题目连接: http://www.codeforces.com/contest/651/problem/C Description Watchmen are in a dang ...

  7. Educational Codeforces Round 9 D. Longest Subsequence dp

    D. Longest Subsequence 题目连接: http://www.codeforces.com/contest/632/problem/D Description You are giv ...

  8. Mac DBeaver Client home is not specified for connection解决办法

    问题: 一般出现这个问题是由于DBeaver 程序无法自动找到数据库的安装目录,在进行数据的导入导出时无法执行,这是因为执行指令需要数据库相关命令的支持. 解决办法: 我用的是mysql,这里拿mys ...

  9. Netty游戏服务器之三搭建Unity客户端

    既然已经写完了相关的服务器处理类,那么我们就来搭建客户端测试一下. 打开我们的unity3d,然后新建一个c#脚本,取名为MainClient. public class MainClient : M ...

  10. git命令01

    1.了解git工具产生的背景知识.git 是什么? 目前它是一种分布式版本控制系统.那什么又是版本控制系统? 一种能自动帮助记录每次文件的改动,不仅仅是记录自己对文件的修 改变化,而且可以记录其他人对 ...