转载:
名词解释:
多播委托是jQuery自身的定义方式,即他不会覆盖原来在其document元素上绑定的事件,
不用我们自己设定,
事件冒泡是指在jQuery元素集同一事件上绑定了多个方法,当我们触发其中某一方法时,
将执行一系列方法,称之为事件冒泡取消事件冒泡的方式是:event.stopPropagation();
首先列举一个简单的jQuery弹出层题目,在页面上定义一个弹出层和一个按钮,单击
按钮在按钮的下方显示一个弹出层,单击任何空白区域或者弹出层,弹出层消失,
该题目的解决方案为:
<script type="text/javascript">
$(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);});
});
</script>
jQuery的动画函数主要分为三类:
a.基本动画函数,既有透明度渐变,又有滑动效果,是最常用的动画效果函数
b.滑动动画函数,仅使用滑动渐变效果
c.淡入淡出动画函数,仅使用透明度渐变效果
另外jQuery也提供了自定义动画函数,将控制权放在我们手里自己定义动画效果
基本动画函数:
show(),无动画效果仅作显示,
show(speed,[callback]),以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发
一个回调函数,speed是一个时间量度,单位毫秒,显示后我们可以执行一个回调函数
hide与show类似,
toggle()切换元素的可见状态,如果元素是可见的,切换为隐藏的,如果元素是隐藏的切换为
可见的,
toggle(swith)根据swith参数切换元素的可见状态(true为可见,false为隐藏),相当于show()
和hide(),比如:var filp = 0;$("button").click(function(){$("p").toggle(filp++%2==0;)});
toggle(speed,[callback])以优雅的动画切换所有匹配的元素,并显式在完成后可选地触发
一个回调函数,"fast"代表快速,相当于200毫秒,slow代表慢速600,normal表示中等速度,
jQuery基本动画函数就这三个:show(),hide(),toggle()都提供了无参的版本,也提供了两个参数的重载
在回调函数function callback(){this;//dom element}中,this是执行此函数的DOM对象,会在动画结束时
执行.
注意:jQuery对象中,隐藏的元素是不能够引发事件的,而我们在引发事件时一般只想引发
当前事件,所以如果可能在某一元素上绑定多个事件,一般要取消事件冒泡event.stopPropagation();
jQuery滑动动画函数Sliding
slideDown(speed,[callback])通过高度变化(向下)来动态地显示所有匹配的元素,在显示完成后
可选地触发一个回调函数,
slideUp(speed,[callback])通过高度变化(向上)来动态地隐藏所有匹配元素,在隐藏完成后
可选地触发一个回调函数
slideToggle(speed,[callback])通过高度变化来切换所有匹配元素的可见性,并在切换完成后
可选地触发一个回调函数
jQuery淡入淡出动画函数Fading:
fadeIn(speed,[callback])通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画
完成后可选地触发一个回调函数,$("p").fadeIn("slow");
fadeOut(speed,[callback])与fadeIn类似,为淡出效果
fadeTo(speed,opacity,[callback])把所有匹配元素的不透明度以渐进方式调整到指定的不
透明度,并在动画完成后可选地触发一个回调函数,$("p").fadeTo("slow",0.66);
opacity参数的值从0-1,比如0.6表示透明度60%,和fadeIn与fadeOut不同的是,fadeTo只
改变对象的透明度,即使透明为0对象仍然占位
自定义动画函数Custom;
animate(params,[duration],[easing],[callback])这个函数的关键在于指定动画形式及
结果样式属性对象,$("#block").animate({opacity:60%}),
animate(params,options),用于创建自定义动画函数,
stop([clearQueue],[gotoEnd])停止所有在指定元素上运行的动画,clearQueue(Boolean):
如果设置成true,则清空队列,可以立即结束动画,如果为true,则队列马上执行,gotoEmd
(Boolean):让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调
函数等.参数说明:
params:一组包含作为动画属性和终值的样式属性和其值的集合.
duration:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长
的毫秒数值,如果省略则不会产生动画
easing:类型String,要使用的擦除效果的名称需要插件支持,默认jQuery提供"linear"
和"swing",讲解:为了让元素逐渐达到params设置的最终效果,我们需要有一个函数来实现
渐变,这类函数就叫做easing函数,但是这里需要传递的只是easing函数名称,使用前需要
先将easing函数注册到jQuery上
options参数:一组包含动画选项的值的集合,支持的属性如下:
duration,与上面的duration参数相同,easing与上面的easing参数相同,complete类型为
function在动画完成时执行的函数,step:callback,queue(Boolean),设定为false将使此
动画不进入动画队列.
动画特效示例jQuery代码,该示例让一个图层从屏幕上方掉落到最下方,并且消失
<script type="text/javascript">
$(function(){
$("#divPop").animate(
{
"opacity":"hide",
"top":$(window).height()-$("#divPop").height()-$("#divPop").position().top
},
600,
function(){
$("#divPop").hide();
}
);
});
</script>
让一个图层越来越大,知道消失jQuery代码:
$("#divPop").animate({
"opacity":"hide",
"width":$(window).width()-$("#divPop").offset().left,
"height":$(window).height()-$("#divPop").offset().top
});
jQuery动画效果全局控制属性
jQuery.fx.off返回Boolean,是否关闭页面上所有的动画,设置为true可以立即关闭
所有动画,设置为false则可以重新开启所有动画,比如下面的代码会执行一个禁用的动画:
jQuery.fx.off=true;
$("#divPop").show(1000);
http://blog.csdn.net/jakwos/article/details/5397563
分享到:
相关推荐
jQuery文章章节全屏动画切换效果是一款鼠标点击按钮网页平滑过渡动画全屏切换特效。
jQuery文章章节平滑切换过渡动画特效
这是一款使用jQuery和css3制作的文章标题动画特效。该文章标题动画特效共有10种效果,分别是:打印机效果、翻转效果、翻牌效果、滑动效果等等。
插件描述:jQuery文章章节平滑切换动画特效. 参考示例:http://www.jq22.com/jquery-info4551
HTML5 SVG文章点赞动画效果jquery插件
js代码 [removed] $(function () { 'use strict'; var main = $('.main'), about = $('.aboutSection'); $('.about').click(function () { main.animate({ 'height': '0', ...[removed]
本篇文章主要介绍了jQuery之动画效果,详细的介绍了各种动画特效的用法,有需要的可以了解一下。
jQuery文章章节平滑切换动画特效.zip
有兴趣刚需的可以自己下载,非常使用的jquery代码,可以完美运行,有能力的还可以二次修改!
jQuery实现的文章章节平滑切换动画特效源码.zip
本资源是jQuery专栏中文章【jQuery动画】停止动画、淡出淡出、自定义动画的源代码,实现效果在文章中噢~
从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (八) 插播:jQuery实施方案 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery ...
《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...
《众妙之门——JavaScript与jQuery技术精粹》出自世界知名Web设计网站Smashing Magazine,其中的文章是来自全球顶级设计师的精华总结。全书共分为两大部分,第一部分阐述JavaScript的实战经验,共7章,内容涉及...
本篇文章主要是对jquery Ajax实现加载数据前动画效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 一....
jQuery 无刷新图标排序代码,带有动画效果,将图片按不同的分类显示,点击分类名,可适时筛选图片,省去从数据库中分类检索的麻烦,当然,也节省了宝贵的网页带宽,又提升了网页体验,一举两得的事情。本插件可广泛...