Javascript-- jQuery动画篇(2)
动画效果
前面的 hide/show,slide in/out 其实也具有动画效果,本篇介绍使用 animate()实现自定义动画效果。
基本语法如下:
$(selector).animate({params},speed,callback);
必选的参数为 params,定义 CSS 用于动画效果的的属性。
可选参数 speed 给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒) 第二个可选参数为回调函数,在 animate()方法结束后调用。
比如下面的例子,将一个
$("button").click(function(){
$("div").animate({left:'250px'});
});
要注意的是,缺省情况下,所有 HTML 元素的位置的固定的,不能移动,因此如果需要修改 HTML 元素的位置,需要事先将它们的 CSS 属性的位置设置为 relative, fixed, 或 absolute。
使用 animate 修改多个属性
下面的例子,可以使用 animate 同时修改多个属性:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
注意:基本所有的 CSS 属性都可以在 animation 中使用,颜色修改不在 jQuery 核心库中,需要Color Animiation 插件来完成。
使用属性相对值
对于 CSS 属性,除了上面使用的绝对大小,也可以使用相对值来定义,使用 “+”“-”。
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
使用预定义的值
也可以使用预定义的值为属性赋值。比如”show”, “hide”, 或 “toggle”:
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
使用队列功能
缺省 jQuery 支持将多个 animation 功能串起来构从一个队列,然后一个一个的执行队列中的指令。
比如:
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
终止动画
jQuery 的使用 stop()方法在动画结束之前停止动画。
基本语法如下:
$(selector).stop(stopAll,goToEnd);
可选参数 stopAll 指明是否同时清除“动画队列”,缺省为 false.意味着只停止当前活动的动画,之后的动画则继续运行。
可选参数 goToEnd 指明是否立即结束当前动画,缺省为 false.
因此缺省的 stop()动作为终止指定 HTML 元素的当前动画效果。如:
$("#stop").click(function(){
$("#panel").stop();
});
Javascript-- jQuery动画篇(2)的更多相关文章
- Javascript - Jquery - 动画
动画(Dynamic) JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果,标准文档格式: <!DOCTYPE html PUBLIC "-//W3 ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- jquery 动画总结(主要指效果函数)
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...
- 【JavaScript&jQuery】前端资源大全
综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
- jQuery初级篇(一)
知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一. jQ ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 7款经典炫酷的HTML5/jQuery动画应用示例及源码
jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...
- jQuery动画效果实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- oracle修改某字段不是必输性
执行sql: ALTER TABLE table_name MODIFY 要修改的字段名字 NULL;
- 十八般武艺之 Runloop
嗯,runloop ,看过,用过.但是有时候突然被问到,总是不能很好的描述给他人,也许是程序员本来口拙的缘故吧.另外,也是对runloop还是理解的不够透彻. 于是乎,决定重新整理一下,加深一下印象. ...
- 页面调用dll
1:本地安装vs2010,有时报错缺少WindowsSP1更新包,下载安装即可. 2:安装完成后,打开VS2010, 3:文件--新建--项目,找到ATL项目(一种COM组件写法),输入项目名称,点击 ...
- ThinkPHP5显示数据库字段内容
1.在application文件夹下面的config.php中打开DEBUG. 2.修改tp5/application/index/controller/Index.php内容. <?php n ...
- 《Java程序设计》第一次实验实验报告
北京电子科技学院(besti)实验报告 课程:java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.08 实验名称:java开发环境的熟悉(linux + eclipse) 程 ...
- 20145230熊佳炜《网络对抗》实验八:WEB基础
20145230熊佳炜<网络对抗>实验八:WEB基础 实验目标 Web前端HTML:能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTM ...
- Zookeeper Zkclient客户端
Zkclient是对Zookeeper的原生API进行了包装,实现了超时重连.Watcher反复注册等功能,它可以实现递归创建,删除节点,但是zkClient不能递归给节点赋值. 主要的api如下: ...
- C# 导出导入TXT文件
导出TXT关键类: using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...
- Python基础笔记系列十一:标准输入输出、文件读写和指针等操作
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 标准输入输出一.输入 在sublime中这个时候需要安装SublimeRE ...
- replace()函数用法
replace()函数表示将用一个字符串替换字符串中的所出现的特定内容. 语法为:replace(字段1,字段2,字段3),意思为字段3将会替换字段1里与字段2相同的内容 列如: table1 st ...