JQuery动画效果
jquery动画实现的注意点：
1、jquery 定义了 fadein() 和 fadeout() 等简单方法来实现常见的视觉效果，还定义了一个 animate() 方法来实现更复杂的自定义动画
2、jquery 动画是异步的，动画方法会在动画完成之前返回
3、jquery 动画方法常使用动画时长（用毫秒数值或字符串来表示）作为第一个可选参数，忽略时长参数或指定时长jquery无法识别时会采用默认值 400ms，字符串 "fast" 表示 200ms、"slow" 表示 600ms。同时，我们可以通过jquery.fx.speeds["new speed"] = speed 来定义新的时长名字以及其数值
4、jquery 动画默认是队列化的，即如果已有一个动画在执行，新的动画需要等当前动画执行完才能执行
5、stop([bool], [bool]) 方法用来停止当前正在执行的任何动画，第一个可选参数为 true ，则会清除选中元素上的元素队列，并取消任何等待执行的动画，为 false 时则不会取消等待执行的动画；第二个可选参数为 true 时会让指定元素停止到最终值，而 false 则会让元素状态停止在它被触发时的状态
6、delay(speed, [queuename]) 方法直接添加一个时间延迟到动画队列里，第一个参数是时长，第二个参数是队列名（通常不需要）
常用jquery动画方法：
1、淡入淡出：fadein([speed], [callback])、fadeout([speed], [callback])、fadeto(speed, opacity, [callback])，fadeto() 会将当前 opacity 值变化到目标值,可选参数 speed 表示动画持续时长；可选参数 callback 表示回调函数（即动画执行后调用的函数）
2、隐藏与显示：show([speed])、hide([speed])、toggle([speed], [bool])，toggle 让元素在 show 和 hide 之间切换
3、滑动：slidedown([speed], [callback])、slideup([speed], [callback])、slidetoggle([speed], [callback])，slidetoggle 在上滑和下滑之间切换
4、jquery 的 animate() 方法定义：$("selector").animate({params}, [speed, callback])，其中 selector 表示选择文档的内容（可以是css选择器）；params 是一个对象且该对象的属性名必须是 css 属性名（支持小驼峰，若属性名包含中划线“-”，则需要使用引号括起来），属性的值必须是动画的目标值
注：默认情况下，所有的 html 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
动画只支持数值属性，对于颜色、字体或 display 等枚举属性无法实现动画效果，但我们可以传入自定义的 css 属性变化函数来支持非数值动画
fadeout() 会让元素看不见，但其在文档里的布局仍然保存着，而 hide() 则会让元素从布局中移除
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate</title>
// 引入 jquery 库
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
// 通过 $(function) 来执行 jquery 代码
$(function () {
$("#button1").click(function () {
//animate({params},[speed,callback]);
$("#div1").animate({height:'300px', opacity:'0.8'});
$("#div1").animate({width:'300px', opacity:'0.4'});
$("#div1").animate({height:'100px', opacity:'0.8'});
$("#div1").animate({width:'100px', opacity:'1'}, function () {
alert("hello animate");
});
});
$("#button2").click(function () {
$("#div1").stop(true, true);
});
$("#button3").click(function () {
$("#div2").animate({left: '200px', fontsize: '2em', textalign: 'center'});
});
$("#button4").click(function () {
$("#div2").animate({left: '0px', fontsize: '1em', textalign: 'left'});
});
});
</script>
</head>
<p>
<button id="button1">开始动画</button> <button id="button2">停止动画</button>
<p>默认情况下，所有的 html 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:fixed;">
</div><br/><br/><br/><br/><br/><br/><br/>
<button id="button3">开始运动</button> <button id="button4">恢复原状态</button><br/><br/>
<div id="div2" style="background-color: #98bf21; height: 100px; width: 100px; position: fixed;">
hello world
</div>
</body>
</html>
上一篇： HTML5实战与剖析之离线应用
下一篇： NFS