原文链接：http://blog.csdn.net/zfy865628361/article/details/50358367

首先，用jQuery做动画效果要求在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：

  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">

一、最常用的动画方法，show()和hide()方法

示例代码:

  1. <span style="font-size:14px;">$("div").hide();
  2. $("div").show();</span>

上面示例为show()和hide()方法不带任何参数的情况下，作用是立即隐藏或显示匹配的元素，不会有任何动画。如果给方法指定一个速度参数，就可以让元素动起来。如下代码使元素在500ms中完成动画

  1. $("div").hide(500);
  2. $("div").show(500);

此外速度参数还有一些推荐值，如：

  1. $("div").show("slow");     //600ms
  2. $("div").show("normal");   //400ms
  3. $("div").show("fast");     //200ms

下面就用这两个方法实现点击按钮一次内容慢慢消失，当再次单击按钮内容慢慢的显示

  1. $(".btn").click(function() {
  2. 　　if ($(".newsInfo").is(":visible")) {//如果为显示状态
  3.         $(".newsInfo").hide(500);
  4.     } else {
  5.         $(".newsInfo").show(500);
  6.     }
  7. });

说明：当为一个元素调用hide()方法时，会将该元素的display样式改为"none"，但是在这之前会先记住原先的display属性值("block"或"inline"或其他除了"none"之外的值)。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。

二、fadeIn()方法和fadeOut()方法

与show()方法不相同的是这两个方法只改变元素的不透明度。fadeOut(0方法会在指定的一段时间内降级元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。

下面就用这两个方法实现点击按钮一次内容慢慢消失，当再次单击按钮内容慢慢的显示

  1. $(".btn").toggle(function() {
  2.     $(this).next(".newsInfo").fadeOut(500);
  3. }, function() {
  4.     $(this).next(".newsInfo").fadeIn(500);
  5. });

三、slideUp()方法和slideDown()方法

这两个方法只会改变元素的高度。如果一个元素的display属性值为"none"，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下倒上缩短隐藏。

下面就用这两个方法实现鼠标箭头移动到按钮上时内容向下出现，当鼠标的箭头移出按钮时内容向上退出显示

  1. $(".btn").hover(function() {
  2. 　　$(".newsInfo").stop(true).slideDown(500);
  3. }, function() {
  4. 　　$(".newsInfo").stop(true).slideUp(500);
  5. });

其中用到了一个stop()方法，它的语法结构为:stop([clearQueue] [, gotoEnd]);

参数clearQueue和gotoEnd都是可选参数，为布尔值。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。如果直接使用stop()方法，则会立即停止当前正在进行的动画。

四、自定义简单动画animate()

语法结构：animate(params，speed，callback)；
参数说明:params：一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2", ...}
speed：速度参数，可选
callback：在动画完成时执行的函数，可选

  1. $(".btn").click(function() {
  2. 　　$(this).animate({
  3. 　　　　left: "300px",
  4. 　　　　height: "200px"
  5. }, 1000, function() {
  6. console.log('回调了');

① toggle(speed，[callback])

  1. $(".btn").toggle(500, function() {
  2.     console.log('我是回调函数');
  3. });

② slideToggle(speed，[callback])

  1. <span style="font-size:14px;">$(".btn").click(function(){
  2.         $(".mycontent").slideToggle();
  3. });</span>
③  fadeTo(speed，opacity，[callback])
  1. $(".btn").click(function(){
  2. 　　$(".mycontent").fadeTo(500,0.2);
  3. });

（九）jQuery中的动画(载)的更多相关文章

  1. jQuery学习笔记（四）jQuery中的动画

    目录 show()方法和hide()方法 fideIn()方法和fadeOut()方法 slideUp方法和slideDown()方法 自定义动画方法animate toogle(),slideTog ...

  2. jQuery笔记（四）jQuery中的动画

    jQuery最吸引人的地方莫过于能做出绚丽的动画了,也是能极大提高用户体验的地方,这次我们就来一探jQuery中的动画! 一. show()方法和hide()方法 show()方法与hide()方法是 ...

  3. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  4. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  5. jQuery中的动画理论干货

    [jQuery中的动画] 通过jQuery动画能够轻松地为页面添加精彩的视觉效果 [show()方法和hide()方法]1.show()方法和hide()方法是jQUERY中最基本的动画方法,相当于在 ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. jQuery中的动画与特效

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  8. JQuery中的动画

    一.show()方法和hide()方法 这两种方法是jQuery动画的最基本方法.当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hid ...

  9. 【学习笔记】jQuery中的动画与效果

    1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值: ...

随机推荐

  1. bzoj 4292: [PA2015]Równanie

    Description 对于一个正整数n,定义f(n)为它十进制下每一位数字的平方的和.现在给定三个正整数k,a,b,请求出满足a<=n<=b且k*f(n)=n的n的个数.   Input ...

  2. git filter-branch应用

    1.修改author和committer git filter-branch --commit-filter ' export GIT_AUTHOR_EMAIL=me@example.com; exp ...

  3. shell 条件表达式

    1.条件测试的常用语法如下 1.test 测试表达式 2.[ 测试表达式 ] #两边需要有空格 3.[[ 测试表达式 ]] 4.(( 测试表达式 )) 说明: 第一种和第二种是等价的,第三种是扩展的t ...

  4. python（1）-- 变量类型

    常规: Python有五个标准的数据类型: Numbers(数字):数字数据类型用于存储数值.他们是不可改变的数据类型,这意味着改变数字数据类型会分配一个新的对象.String(字符串):由数字.字母 ...

  5. 球形空间产生器sphere（bzoj 1013）

    Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...

  6. 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B)

    原文发布时间为:2010-05-25 -- 来源于本人的百度文章 [由搬家工具导入] 读扇区错误:0柱面0磁头1扇区(硬盘问题，蓝屏等 0x0000007B) DISKGEN能找到,那就没什么大问题的 ...

  7. [LeetCode] Longest Substring Without Repeating Characters最长无重复子串

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  8. CentOS下Yum使用

    1. 介绍 Yum,即Yellow dog Updater Modified,是一个基于 RPM 包管理的字符前端软件包管理器:能够从指定的服务器自动下载 RPM 包并且安装,可以处理依赖性关系,并且 ...

  9. RecyclerView的Item和Item内的控件点击处理

    需求场景:RecyclerView的Item需要点击,或者Item中的某个控件需要点击,或者两者同时需要点击处理. 一.adapter代码如下: package com.ldw.adapter; im ...

  10. AC日记——【模板】普通平衡树（Treap/SBT） 洛谷 P3369

    [模板]普通平衡树(Treap/SBT) 思路: 劳资敲了一个多星期: 劳资终于a了: 劳资一直不a是因为一个小错误: 劳资最后看的模板: 劳资现在很愤怒: 劳资不想谈思路!!! 来,上代码: #in ...