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 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...

随机推荐

第七章 HTTP流量管理（一） gateway
Gateway: istio的一种资源类型,Istio Gateway告诉k8s的istio-ingressgateway pods可以打开哪些主机和端口(如下的80是 ingressgateway ...
Oracle 10 Recycle Bin回收站
这个功能从10g开始有了. (1)什么是Recycle Bin实际上,Recycle Bin只是一个保存被drop的对象的一个数据字典表.所以,可以通过如下语句查询回收站中的信息:select * f ...
Warning: require(): open_basedir restriction in effect. File(/www/wwwroot/../thinkphp/start.php) is not within the allowed path(s):
Warning: require(): open_basedir restriction in effect. File(/www/wwwroot//../thinkphp/start.php) is ...
JAVASCRIPT数据类型（值类型-引用类型-类型总览）
值类型:也称为原始数据或原始值(primitive value). 这类值存储在栈(stack)中,栈是内存中一种特殊的数据结构,也称为线性表,栈按照后进先出的原则存储数据,先进入的数据被压入栈底,最 ...
msql修改密码
修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...
fatal error C1010: 在查找预编译头时遇到意外的文件结尾 (转)
错误描述:fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "stdafx.h"”? 错误分析: 此错误发生 ...
UGUI 学习
1. Grid Layout Group(网格布局) Hierachy: Game: 属性和功能: 2. 根据鼠标位置旋转界面实现: public class TiltWindow : MonoBeh ...
druid 连接池的配置
dataSource配置  <bean id="dataSource" class="com ...
易捷框架之EChart 的使用
需要用到百度的报表控件 ,总结如下: 1,先引入开发包,以及主题包: <%@ include file="./common/echarts_header.jsp"%> ...
WCF配置Tcp协议
注意点: 1,<serviceMetadata httpGetEnabled="false"/> 2, <services> ...