推荐的学习资源来自:张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/
概要:
动画,特效
内容:
一个web弹出层实例:
思路:
1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.
2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.
3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭.
<scripttype="text/javascript">
$(document).ready(function () {
//动画速度
var speed = 500;
//绑定事件处理
$("#btnShow").click(function (event) {
//取消事件冒泡
event.stopPropagation();
//设置弹出层位置
var offset =$(event.target).offset();
$("#divPop").css({top: offset.top + $(event.target).height() + "px", left: offset.left});
//动画显示
$("#divPop").show(speed);
});
//单击空白区域隐藏弹出层
$(document).click(function(event) { $("#divPop").hide(speed) });
//单击弹出层则自身隐藏
$("#divPop").click(function (event) {$("#divPop").hide(speed) });
});
</script>
基本动画函数:
Show():显示匹配元素
Show(speed,[callback]):show(600)用时600毫秒显示
Hide():隐藏
Hide(speed,[callback]):hide(“slow”)
Toggle():切换为隐藏/显示
Toggle(switch): $("p").toggle( flip++ % 2 == 0 );
为true
调用show,
false调用hide
Toggle(speed,[callback]):$(“p”).toggle(“fast”,function(){alert(“aa”)})用200毫秒,完
成后显示对话框
滑动动画效果:sliding
Sildedown(speed,[callback]):向下滑
Sildeup(speed,[callback]):
Sildetoggle(speed,[callback]):
淡入淡出函数:fading
Fadein(speed,[callback]):
Fadeout(speed,[callback]):
FadeTo(speed,opacity,[callback]):
$(“p”).fadeTo(“slow”,0.66):用600毫秒,将段落透明度调整到2/3可见度
自定义动画:custom
Animate(params,[duration],[easing],[callback]):
Animate(params,options)
Stop([cleatQueue],[gotoEnd])
参考手册
例子:
掉落消失的动画:
$(document).ready(function() {
$("#divPop")
.animate(
{
"opacity":"hide",
"top":$(window).height() - $("#divPop").height() –
$("#divPop").position().top
},
600,
function () { $("#divPop").hide(); }
);
});
自定义消散:
$(document).ready(function() {
$("#divPop")
.animate(
{
"opacity":"hide",
"width":$(window).width() - 100,
"height":$(window).height() - 100
},
500
);
});
全局控制属性:
jQuery.fx.off返回值Boolean,关闭页面上所有动画
true立即关闭所有动画,设为false后可以重新开启所有动画