javascript总结47: JS动画原理&jQuery 效果- 各种动画
1 动画的原理就是： 盒子本身的位置+步长
2 什么是步长?
var box=document.getElementById('box');
btn.onclick = function()
{
//最基本的运动
setInterval('move(box)',30);
}
//最初级的匀速运动
// 数学公式: s=s+s'
function move(obj){
obj.style.left=obj.offsetLeft+speed+'px';
}
3 jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：
$("button").click(function(){
$("div").animate({left:'100px'});
});
4 jQuery animate() - 操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
5 jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("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");
});
});
</script>
</head> <body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div> </body>
</html>
6 jQuery animate() - 使用预定义的值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
7 jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
javascript总结47: JS动画原理&jQuery 效果- 各种动画的更多相关文章
- jQuery 效果 – 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动 演示 jQuery stop() 方法. jQuery s ...
- jQuery 效果 - 停止动画
jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果,在它们完成之前. ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js进阶 13-2 jquery动画滑动效果哪些注意事项
js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
随机推荐
- 使用Eclipse可以启动服务器,却不能访问localhost
今天心血来潮修改了Tomcat的端口号,将默认的8080改为8888,使用MyEclipse部署项目没有问题,只是访问的地址不可以使用8080而是要用8888,这是当然的了,毕竟我修改了.但是使用Ec ...
- 【UVA】1595 Symmetry（模拟）
题目 题目 分析 理清思路,上模拟. 代码 #include <bits/stdc++.h> using namespace std; const int maxn=100 ...
- Git版本控制：Github的使用之 多人协作及参与项目
版权声明:本文为博主皮皮http://blog.csdn.net/pipisorry原创文章,未经博主允许不得转载. 目录(?)[-] Git多人协作 从远程库克隆 使用GitHub参与开源项目- ...
- java.lang.NoClassDefFoundError: org/jaxen/JaxenException解决方法
在使用dom4j的xpath时出现java.lang.NoClassDefFoundError: org/jaxen/JaxenException的异常,原因是dom4j引用了jaxen jar包,而 ...
- Eclipse的基本使用
01Eclipse的下载安装 * A: Eclipse的下载安装 * a: 下载 * http://www.eclipse.org * b: 安装 * 只需要解压后就能使用 * c: 卸载 * 只 ...
- U盘安装centos7.1出现dracut问题的超简单解决方法
恰好今天有空,于是抽空回忆一下之前U盘安装CENTOS7时遇到的一个大坑.U盘装系统习惯了,就顺手用大白菜工具刻了一个CentOS 7.1的minimun ISO镜像到U盘,于是噩梦开始了.如果有人像 ...
- Unity脚本开发基础 C#
1. MonoBehaviour 类 常用事件响应函数: 2. 访问游戏对象 (1) 通过名称来查找 (2) 通过标签来查找 上述函数比较费时,应避免在 Update 函数调用. 3. 访问组件 对于 ...
- Yum -y update 报错
问题描述: 操作系统:CentOS 6.5 今天服务器上执行 yum -y update 命令时,提示: Running rpm_check_debug ERROR with rpm_check_de ...
- 在Windows10系统中配置和运行MongoDB数据库，linux开启mongdb
参考链接:http://jingyan.baidu.com/article/11c17a2c03081ef446e39d02.html linux中开启mongodb服务: 1. 进入到/data/ ...
- Oracle-11g 回缩表高水位
回缩表高水位的意义: 所有的 Oracle 段都有一个在段内容纳数据的上线,即高水位线(high water mark).HWM 是一个标记,很像水库的丽水最高水位,即使表内数据全部删除,HWM 也还 ...