每天学点JQuery(4)—动画
来源:互联网 发布:淘宝付款界面打不开 ie 编辑:程序博客网 时间:2024/05/16 01:23
1.show()和hide():通过改变高度,宽度,不透明度来显示/隐藏元素。
$(function(){ $("a").hide()//通过hide方法隐藏元素})等价于$(function(){ $("a").css("display","none");})当把元素隐藏后,可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其他除了"none"之外的值)。$(function(){ $("a").show()//通过show方法显示元素})同时也可以为slow()和hide()指定时间参数,以毫秒为单位,还有几个速度关键字:slow(600毫秒),normal(400毫秒),fast(200毫秒)$(function(){ $("a").hide("slow")//以slow的速度值隐藏元素})$(function(){ $("a").show(1000)//1秒显示元素})
2.fadeIn()和fadeOut():通过改变元素的不透明度显示/隐藏元素
$(function(){ $("a").fadeOut()//降低元素不透明度直到元素完全消失("display:none")})$(function(){ $("a").fadeIn()//增加元素不透明度显示元素})与show()hide()一样,fadeOut()fadeIn()也可以添加时间参数。
3.slideUp()和slideDown()方法:通过改变元素的高度显示/隐藏元素
$(function(){ $("a").slideUp()//元素由上至下延伸显示})$(function(){ $("a").slideDown()//元素由下到上缩短隐藏})与show()hide()一样,fadeOut()fadeIn()也可以添加时间参数。
4.animate():自定义动画方法
animate(params,speed,callback);
params:一个包含样式属性及值得映射,比如{property1:”value1”,property1:”value1”,……}
speed:速度参数(毫秒单位),可选
callback:在动画完成时执行的函数,可选
为了能影响元素的top,left,bottom,right样式属性,必须把元素的position属性设置为relative或absolute。
$(function(){ $("a").animate({left:"500px"},3000)//使元素在三秒内向右移动500像素})$(function(){ $("a").animate({left:"+=500px"},3000)//从当前位置累加500像素})$(function(){ $("a").animate({left:"500px"},3000)//使元素在三秒内向右移动500像素})$(function(){ $("a").animate({left:"500px",height:"200px"},3000)//使元素在三秒内向右移动的同时放大元素的高度(同时执行)})$(function(){ $("a").animate({left:"500px"},3000).animate({left:"500px"},3000)//使元素在三秒内向右移动500px,然后放大元素的高度(顺序执行)})
5.动画回调函数:
如果在执行动画的过程中,在某一步动画执行结束后需要执行css()方法,那么并不能得到预期的效果,因为css()方法不会加入到动画队列中,而是立即执行,此时就需要通过回调函数对非动画方法实现排队,只要把css()方法写到前一步的回调函数中即可。
$(function(){ $("a").animate({left:"500px"},3000) .animate({left:"500px"},3000),function(){ $(this).css("border","1px solid red"); })})
6.停止动画:stop([clearQueue],[gotoEnd])
参数说明:
clearQueue(boolean):代表是否清空未执行完的动画队列
gotoEnd(boolean):代表是否直接将正在执行的动画跳转到末状态
直接调用stop(),则会立即停止当前正在进行的动画,如果接下来还有动画等待进行,则以当前状态开始接下来的动画。
7.延迟动画:
$(function(){ $("a").delay(2000).animate({left:"500px",height:"200px"},3000)//延迟两秒后使元素在三秒内向右移动的同时放大元素的高度(同时执行)})
8.其他动画方法:
(1)toggle(speed,[callback]):切换元素可见状态。
$(function(){ $("a").toggle()//如果元素可见,切换为隐藏,如果元素隐藏,切换为可见})
(2)slideToggle(speed,[easing],[callback]):通过高度改变元素可见状态
easing参数:规定动画在不同点的不同速度,”swing” - 在开头/结尾移动慢,在中间移动快,”linear” - 匀速移动,默认为swing。
$(function(){ $("a").slideToggle()//如果元素可见,切换为隐藏,如果元素隐藏,切换为可见})
(3)fadeTo(speed,opacity,[callback]):把元素的不透明度以渐进的方式调整到指定的值,注意只改变元素的不透明度。
$(function(){ $("a").fadeTo(600,0.2)//渐渐调整到指定的不透明度(20%)})
(4)fadeToggle(speed,[easing],[callback]):通过不透明度变化切换元素可见性
easing参数:规定动画在不同点的不同速度,”swing” - 在开头/结尾移动慢,在中间移动快,”linear” - 匀速移动,默认为swing。
$(function(){ $("a").fadeToggle()//渐渐调整到指定的不透明度(20%)})
可用animate()替代上述所有动画方法,在animate()方法中,这些特定样式的属性值可以为”show”,”hide”,”toggle”,也可以是自定义数值,例如:
$(function(){ $("a").animate({height:"show",width:"show",opactity:"0.6"},400)})
- 每天学点JQuery(4)—动画
- 每天学点JQuery(1)—选择器
- 每天学点JQuery(3)—事件
- 每天学点jQuery(五)
- 每天学点jQuery(六)
- 每天学点JQuery(2)—DOM操作
- 每天学点jQuery(一)
- 每天学点jQuery(二)
- 每天学点jQuery(三)
- 每天学点jQuery(四)
- 每天学点Scala 4
- 每天学点linux命令(4)
- 每天学点java—文档注释
- 每天学点java—Object类
- 每天学点C++
- 每天学点知识
- 每天学点Linux
- 每天学点C++(二)
- Genymotion报错virtualbox cannot start the virtual device
- 第六周项目3-IP地址类
- HM编码器代码阅读(8)——其他的一些重要的变量和数据结构的说明
- Kafka剖析(一):Kafka背景及架构介绍
- 找到一个数的质因子
- 每天学点JQuery(4)—动画
- [HNOI2002]营业额统计 【splay无初始数组,单点插入找最值】
- iOS 保持界面流畅的技巧
- 用handler发延时消息时最好设置设为static
- Windows下PyQt4的安装
- 选择列表中的列无效,因为该列没有包含在聚合函数或 GROUP BY 子句中
- $.fn.jqGrid和$.jgrid.extend
- va_list/va_start/va_arg/va_end深入分析
- DDR2 SDRAM×32布局、布线经验谈