JQuery(二)——简单动画效果
来源:互联网 发布:sql查询语句实例中文 编辑:程序博客网 时间:2024/05/04 01:15
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结。总结一些常见的常用的基本效果的必备方法。从隐藏显示,淡入淡出,滑动,动画等几个方面来简单总结一下。
一,JQuery实现隐藏显示的功能:
1,jQuery hide() 和 show()
通过 jQuery,您可以使用hide() 和 show() 方法来隐藏和显示 HTML 元素:
2,jQuery toggle()
通过 jQuery,您可以使用toggle() 方法来切换 hide() 和 show() 方法。
3,语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的callback 参数是隐藏或显示完成后所执行的函数名称。
我用toggle来举个例子:
<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").toggle(1000); });});</script></head><body><button type="button">切换</button><p>这是一个段落。</p><p>这是另一个段落。</p></body></html>
二,淡入淡出动画效果功能:
方法名
含义
语法
fadeIn()
用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
fadeout()
用于淡出可见元素
$(selector).fadeOut(speed,callback);
fadeToggle()
可以在 fadeIn() 与 fadeOut() 方法之间进行切换 ,和上边的toggle功能一样
$(selector).fadeToggle(speed,callback);
fadeTo()
允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
其中:opacity为不透明度的参数(0——1之间)
我们来拿fadeTo来几个例子:
<!DOCTYPE html><html><head><script src="/jquery/jquery.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });});</script></head><body><p>演示带有不同参数的 fadeTo() 方法。</p><button>点击这里,使三个矩形淡出</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>
效果图,大家自己copy一份代码运行来试试看吧!
三,滑动效果的功能,这个大家看一下这几个方法即可了,例子不在举例,和上边的都大同小异:
方法名
含义
语法
slideDown
用于向下滑动元素
$(selector).slideDown(speed,callback);
slideUp
用于向上滑动元素
同上
slideToggle
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
同上
四,动画效果,这个相对来说好看一下,也复杂一下,不过它仅仅使用了一个方法:
jQuery 动画 - animate() 方法
jQuery animate()方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params参数定义形成动画的 CSS属性。
可选的 speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。
可选的 callback参数是动画完成后所执行的函数名称。
我们来看一个例子:这个例子同时使用了多次amimate方法,使其动画连贯了起来:
<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/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 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>
五,几种效果的补充:
上边为我们常见的几种JQuery方便快捷实现的效果,这里再学习几个跟他们相关的几个方法。
1,jQuery stop() 方法:
jQuerystop() 方法用于停止动画或效果,在它们完成之前。
stop()方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
解释:
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
2,上边几种动画方法语法中提到的callback函数,也就是在执行完当前动画以后要执行的函数。一定要现在callback中,否则会出现顺序不正确的结果。这里不再演示。
3,Chaining,也就是链,意思是说可以把我们上边的几种动画连写起来,这样就不需要多次查找相同的元素。看一个例子:
<!DOCTYPE html><html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function() { $("button").click(function(){ //当然这里换行来写,使其格式看着更漂亮 $("#p1").css("color","red").slideUp(2000).slideDown(2000); });});</script></head><body><p id="p1">jQuery 链锁反应</p><button>点击这里</button></body></html>
综上为JQuery实现的几种常见的动画效果,虽然简单,但是非常实用,我们可以通过举一反三来使其达到更好的效果。当然更多效果方法我们可以通过JQuery的API来查询,可以更多的满足我们!!!
- JQuery(二)——简单动画效果
- JQuery—简单动画效果
- jquery 简单的动画效果
- jQuery简单动画效果和动画队列
- Jquery 示例二 简单动画
- jQuery学习——动画效果
- jQuery 效果(2)——停止动画
- jQuery效果(四)——动画
- Jquery——Day3(动画效果)
- jquery 学习(二) 动画效果
- 强大的JQuery(二)--动画效果
- 一个简单的JQuery广告动画效果
- jquery做简单的动画效果
- Jquery中的的简单动画效果
- jquery简单动画效果(上)
- jquery简单动画效果(下)
- jquery简单动画效果实践(一)
- 浅谈jQuery——jQuery基本动画效果
- safari中判断app是否安装
- 那些逝去的岁月-会议
- 各种~~
- ARM底层学习笔记-内存管理单元(了解概念,不必深究)
- pku openjudge 题目 新丛林道路
- JQuery(二)——简单动画效果
- 在硬盘读取文档,并在文本域显示的JAVA程序代码
- java正则表达式去除html标签
- ESP与EBP
- jquery学习--与DOM,选择器
- android开发之GridLayout详解
- 多级Activity以及多个来源Activity之间的跳转
- sublime text 中文乱码
- 校招面试总结