jQuery隐藏和显示:
使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素:
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
 
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
 
一个关于调用callback函数的实例:
 
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
 
使用 toggle() 方法来切换 hide( ) 和 show( ) 方法,显示被隐藏的元素,并隐藏已显示的元素:
语法:
$(selector).toggle(speed,callback);
 
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
 
jQuery 淡入淡出效果:
jQuery fadeIn( ) 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
 
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是 fading 完成后所执行的函数名称。
 
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
 
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是 fading 完成后所执行的函数名称。
 
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
 
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果,如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
 
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是 fading 完成后所执行的函数名称。
 
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
 
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间),可选的 callback 参数是该函数完成后所执行的函数名称。
jQuery 滑动:
 
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
 
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是滑动完成后所执行的函数名称。
 
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
 
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是滑动完成后所执行的函数名称。
 
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
 
如果元素向下滑动,则 slideToggle() 可向上滑动它们,如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:
$(selector).slideToggle(speed,callback);
 
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是滑动完成后所执行的函数名称。
 
jQuery 动画:
 
jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
 
必需的 params 参数定义形成动画的 CSS 属性,可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒,可选的 callback 参数是动画完成后所执行的函数名称。
 
提示:
  1. 默认地,所有 HTML 元素都有一个静态位置,且无法移动,如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
  2. 可以用 animate() 方法来操作所有 CSS 属性,不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。同时,色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
  3. 可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=。
  4. 甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
  5. 默认地,jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

jQuery stop() 方法:

 
jQuery stop() 方法用于停止动画或效果,在它们完成之前,stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
 
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此,默认地,stop() 会清除在被选元素上指定的当前动画。

jQuery自学笔记(三):jQuery动画效果的更多相关文章

  1. jQuery:自学笔记(2)——jQuery选择器

    jQuery:自学笔记(2)——jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font ...

  2. Jquery库自带的动画效果方法记录

    1.显示和隐藏hide()和show() <script type="text/javascript">             $(function() {      ...

  3. jQuery:自学笔记(4)——事件与事件对象

    jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...

  4. jQuery:自学笔记(1)——基础入门

    jQuery:自学笔记(1)——基础入门 认识JQuery 1.jQuery概述 jQuery是一个快速.小巧 .功能丰富的JavaScript函数库.它可以实现“写的少,做的多”的目标. jQuer ...

  5. JQuery实现的模块交换动画效果

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  6. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  7. jQuery:自学笔记(5)——Ajax

    jQuery:自学笔记(5)——Ajax 使用Ajax快捷函数 说明 出于简化AJAX开发工作的流程,jQuery提供了若干了快捷函数. 实例 1.显示 test.php 返回值(HTML 或 XML ...

  8. jQuery:自学笔记(3)——操作DOM

    jQuery:自学笔记(3)——操作DOM 修改元素的属性 获取元素属性 设置元素属性 修改元素的内容 说明 有三种方式可以获取HTML元素的内容,分别是 ☐ text():设置或返回所选元素的文本内 ...

  9. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  10. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

随机推荐

  1. Git使用说明--常用命令

    These are common Git commands used in various situations: start a working area (see also: git help t ...

  2. Linux查看机器是多少位

    命令: file /bin/ls或者file /sbin/init 示例: 如上所示,我的机器是32位的.

  3. Web2py也有意思的

    多学学,以后可以方便的自己写代码了. 对于各种WEB框架,这也是打一个基础的时候. 相信学入门了,对PHP的,JAVA的WEB框架,都是能理解更深入的. def index(): "&quo ...

  4. SolrCloud 5.2.1 installation and configuration

    虽然不是很有技术含量的事情,主要依靠的是阅读能力,然而知识的东西还是记录一下,以备后继待查. 环境相关 1. Server:h1,h2,h3 2. OS RHEL 6.2 3. Zookeeper 3 ...

  5. Linux系统编程(26)——守护进程

    Linux系统启动时会启动很多系统服务进程,比如inetd,这些系统服务进程没有控制终端,不能直接和用户交互.其它进程都是在用户登录或运行程序时创建,在运行结束或用户注销时终止,但系统服务进程不受用户 ...

  6. [译] 新手和老手都将受益的JavaScript小技巧

    这篇文章会分享一些鲜为人知但却很强大的JavaScript技巧, 各个级别的JavaScript开发者都会从中受益.   1. 用数组的length属性清空数组   我们知道在JS中对象类型是按引用传 ...

  7. cf435A Queue on Bus Stop

      A. Queue on Bus Stop time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. 让iframe调用页面的背景透明

    需求:在一个div里面嵌套一个iframe(src="ui.html"),div有背景图片,要让iframe里的内容透明地显示在div层上. 刚开始直接把iframe放在div中, ...

  9. struts2.1.3之后使用自定义Filter

    struts2中 ActionContextCleanUp, StrutsPrepareAndExecuteFilter, StrutsPrepareFilter,StrutsExecuteFilte ...

  10. 中国大推力矢量发动机WS15 跨入 世界先进水平!

    "太行"WS-15让俄闭嘴令美叹服 歼20试飞向世界证明,中国军工世界一流,并有望与美英法争夺新一代航空发动机桂冠.笔者请教解放军专家证实:中国四代机所配套的两台18吨推力的WS- ...