JQuery基础之(七)jQuery动画处理
2009-12-07 18:03
1091 查看
一、 前言
本文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!
二、 基本动画函数——从实例开始
<head runat="server">
<title>动画</title>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function(){
//绑定按钮的click事件
$("#btnShow").bind("click", function(event){
event.preventDefault(); //阻止按钮的默认事件执行
event.stopPropagation(); //阻止事件冒泡,如果不阻止则事件会一层层的被捕获
var offset = $(event.target).offset(); //获取激发事件的对象的偏移对象
$("#divPop").css("top", offset.top + $(event.target).height())
.css("left", offset.left)
.css("width", $(event.target).width())
.show("slow");
});
$(document).bind("click", function(){$("#divPop").hide(3000);}); //点击页面的空白地方,则隐藏弹出div,整个过程为三秒钟
$("#divPop").bind("click", function(event){event.stopPropagation();}); //阻止在点击弹出div时被下层对象捕获到
});
</script>
</head>
<body id="bbb">
<form id="form1" runat="server">
<div>
<asp:Button ID="btnShow" runat="server" Text="显 示" />
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
width: 300px; height: 100px;">
<div style="text-align: center;">弹出层</div>
</div>
</div>
</form>
</body>
基本动画函数
上例中使用的show()和hide()是我们使用最多的基本动画函数,下面是jQuery的基本动画函数:
上面个参数的speed参数可为:slow、fast或具体的数值,单位是毫秒
三、 滑动动画函数——从实例开始
基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.
$("#divPop").slideDown(200); //用于显示时
$("#divPop").slideUp("fast"); //用于隐藏时
$("#divPop").slideToggle("slow"); //用于切换时
基本滑动函数:
上面个参数的speed参数可为:slow、fast或具体的数值,单位是毫秒
四、 淡入淡出函数——从实例开始
淡出淡出函数只提供透明度渐变的效果.
$("#divPop").fadeIn(200); //用于显示时
$("#divPop").fadeOut("fast"); //用于隐藏时
$("#divPop").fadeTo(0, 0.66); //淡到指定的透明度,第一个参数为speed、第二个参数为透明度
基本淡入淡出函数:
五、 总结说明
上面介绍的动画函数我觉得可以满足我们绝大部分的需求,因为毕竟我们只是需要一个简单的动画效果,而不是要做出个动画片来,如需更详细的控制,请链接:
http://www.cnblogs.com/zhangziqiu/archive/2009/05/11/jQuery-Learn-7.html#1716792
本文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!
二、 基本动画函数——从实例开始
<head runat="server">
<title>动画</title>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function(){
//绑定按钮的click事件
$("#btnShow").bind("click", function(event){
event.preventDefault(); //阻止按钮的默认事件执行
event.stopPropagation(); //阻止事件冒泡,如果不阻止则事件会一层层的被捕获
var offset = $(event.target).offset(); //获取激发事件的对象的偏移对象
$("#divPop").css("top", offset.top + $(event.target).height())
.css("left", offset.left)
.css("width", $(event.target).width())
.show("slow");
});
$(document).bind("click", function(){$("#divPop").hide(3000);}); //点击页面的空白地方,则隐藏弹出div,整个过程为三秒钟
$("#divPop").bind("click", function(event){event.stopPropagation();}); //阻止在点击弹出div时被下层对象捕获到
});
</script>
</head>
<body id="bbb">
<form id="form1" runat="server">
<div>
<asp:Button ID="btnShow" runat="server" Text="显 示" />
<!-- 弹出层 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
width: 300px; height: 100px;">
<div style="text-align: center;">弹出层</div>
</div>
</div>
</form>
</body>
基本动画函数
上例中使用的show()和hide()是我们使用最多的基本动画函数,下面是jQuery的基本动画函数:
名称 | 说明 | 举例 |
show( ) | 显示隐藏的匹配元素。 这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。 | 显示所有段落: $("p").show() |
show( speed, [callback]) | 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。 | 用缓慢的动画将隐藏的段落显示出来,历时600毫秒: $("p").show(600); |
hide( ) | 隐藏显示的元素 这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。 | 隐藏所有段落: $("p").hide() |
hide( speed, [callback] ) | 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。 | 用600毫秒的时间将段落缓慢的隐藏: $("p").hide("slow"); |
toggle( ) | 切换元素的可见状态。 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 | 切换所有段落的可见状态: $("p").toggle() |
toggle( switch ) | 根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。 如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。 | 切换所有段落的可见状态: var flip = 0; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); }); |
toggle( speed, [callback] ) | 以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。 | 用200毫秒将段落迅速切换显示状态,之后弹出一个对话框: $("p").toggle("fast",function(){ alert("Animation Done."); }); |
三、 滑动动画函数——从实例开始
基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.
$("#divPop").slideDown(200); //用于显示时
$("#divPop").slideUp("fast"); //用于隐藏时
$("#divPop").slideToggle("slow"); //用于切换时
基本滑动函数:
名称 | 说明 | 举例 |
slideDown(speed, [callback]) | 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。 | 用600毫秒缓慢的将段落滑下: $("p").slideDown("slow"); |
slideUp(speed, [callback]) | 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。 | 用600毫秒缓慢的将段落滑上: $("p").slideUp("slow"); |
slideToggle(speed, [callback]) | 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 | 用600毫秒缓慢的将段落滑上或滑下: $("p").slideToggle("slow"); |
四、 淡入淡出函数——从实例开始
淡出淡出函数只提供透明度渐变的效果.
$("#divPop").fadeIn(200); //用于显示时
$("#divPop").fadeOut("fast"); //用于隐藏时
$("#divPop").fadeTo(0, 0.66); //淡到指定的透明度,第一个参数为speed、第二个参数为透明度
基本淡入淡出函数:
名称 | 说明 | 举例 |
fadeIn( speed, [callback] ) | 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。 | 用600毫秒缓慢的将段落淡入: $("p").fadeIn("slow"); |
fadeOut( speed, [callback] ) | 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 | 用600毫秒缓慢的将段落淡出: $("p").fadeOut("slow"); |
fadeTo(speed, opacity, [callback]) | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。 | 用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度: $("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); |
上面介绍的动画函数我觉得可以满足我们绝大部分的需求,因为毕竟我们只是需要一个简单的动画效果,而不是要做出个动画片来,如需更详细的控制,请链接:
http://www.cnblogs.com/zhangziqiu/archive/2009/05/11/jQuery-Learn-7.html#1716792
相关文章推荐
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
- jQuery动画的hover连续触发动画bug处理
- jQuery事件处理,动画,类数组操作
- jQuery 1.7 正式版已经可以下载使用。jQuery是一个JavaScript库,它简化了HTML文档遍历,事件处理,动画和为网络快速发展的Ajax交互。jQuery 1.7 版本加入了新的事件API .on() 和 .off(),提
- jQuery基础 - 如何处理HTML标签属性
- jQuery事件处理 、 jQuery动画
- jQuery基础(四)—动画篇
- 【练习向】jQuery基础教程第四版课后练习——Book04_jQuery_样式与动画
- [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用
- jQuery笔记——动画设计——动画设计基础
- jQuery动画的hover连续触发动画bug处理
- jquery基础学习之动画效果
- 从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)
- Jquery基础学习笔记(2)-文档处理
- Jquery基础_点击按钮使div背景变色_根据class_根据标签_所有都变色_一直动画_实例(二)
- jQuery 1.9.1源码分析系列(十五)之动画处理
- ASP.NET jQuery 食谱21 (jQuery各种动画基础效果技巧集合)
- jquery基础(7)动画特效
- jQuery中处理动画序列引起的问题
- jQuery的动画处理总结