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 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路 ...
随机推荐
- 【学徒日记】Unity 动画调用事件
http://note.youdao.com/noteshare?id=a15f965fc57a0b25c87ee09388cf0f4a 具体内容看上面的链接. 1. 在脚本里写一个函数,它的参数只能 ...
- setTimeout和setInterval的unref()和ref()用法
var testFunction=function(){ console.log("guoyansi"); } var timer=setInterval(testFunction ...
- socket通信循环
server-----------------#!/usr/bin/env python # encoding: utf-8 # Date: 2018/6/5 import socket phone ...
- golang代码覆盖率
写了自动化,就得统计代码覆盖率= = 原链接:https://www.elastic.co/blog/code-coverage-for-your-golang-system-tests 其实看了原链 ...
- python实现cifar10数据集的可视化
在学习tensorflow的mnist和cifar实例的时候,官方文档给出的讲解都是一张张图片,直观清晰,当我们看到程序下载下来的数据的时候,宝宝都惊呆了,都是二进制文件,这些二进制文件还不小,用文本 ...
- JVM常用参数设置
堆内存设置 示例: java -Xmx4550m -Xms4550m -Xss128k -XX:NewRatio=5 -XX:SurvivorRatio=5 -Xmx4550m:设置JVM最大可用内存 ...
- (转) Linux下Setuid命令！
在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在文件/etc/passwd中,用户的密码保存在文件/etc/shadow中,也就是说用户更改自己密码时是修 ...
- 【译】PGS字幕
PGS(Presentation graphic stream):图形字幕流,是用来显示蓝光电影中的字幕的流.当蓝光盘中的PGS格式的字幕被分离存储的时候通常保存在一个以sup为扩展名的文件中.(也可 ...
- GameObject.DestroyImmediate(go, true)会使磁盘资源数据丢失，导致不可用
GameObject.DestroyImmediate(go, true)会使磁盘资源数据丢失,导致不可用 第二个参数true表示 allowDestroyingAssets,表示允许销毁资源. 实测 ...
- 双 MySQL 启动、停止脚本
5.5 启动 #!/bin/bash # author: Wang Xiaoqiang # func: Start MySQL 5.5 pid=`netstat -lnpt | awk -F '[ / ...