JQuery第五天之JQuery动画
这一节的内容是为各位小伙伴讲解一下JQuery中的动画
首先来介绍两个两个方法
hide():隐藏方法,()内也可以直接传入参数,也可以不穿,根据个人项目需要设置即可
show():显示方法,()内也可以直接传入参数,也可以不穿,根据个人项目需要设置即可
参数:1.可以直接传入数字类型的参数,数字类型的是以毫秒为单位 hide(1000) 1000表示的就是1秒
2.可以是规定的slow(慢) normal(正常) fast(快)
例子:点击显示按钮,让div显示,点击隐藏按钮,让div隐藏
注意:传入数字的时候不用带双引号,传入fast、normal、slow的时候必须要带双引号,才可以产生效果
案例:点击按钮,让多个div隐藏或者显示
上面两个方法里面不仅可以带参数,而且还可以传入函数
另外的常用的动画方法
slideUp():动画以滑入的方式实现
slideDown():动画以滑出的方式实现
slideToggle():动画在滑入滑出之间切换
fadeIn():动画以淡入的方式实现
fadeOut():动画以淡出的方式实现
fadeToggle():动画在淡入淡出之间切换
上面的方法就不一一举例了,希望各位小伙伴平时可以自己多实践操作
动画方法:animate()
一共有三个参数:第一个参数是键值对的方式传入,但是注意数值得属性可以更改,颜色不能更改的哦
第二个参数是动画的时间
第三个参数是一个回调函数
例如:$("#div_none").animate({"width:100px":"height:100px","left":"50px"},1000,function(){
. $("#div_none").animate({"width:100px":"height:100px","left":"350px"},2000);
})
方法:stop():停止动画
使用方法:在当前元素显示或者隐藏的前面写上stop()方法,然后后面再写上显示或者隐藏的方法
一般多用于菜单栏下拉显示隐藏的时候产生的bug,用stop解决比较方便
好了,JQuery的动画介绍到这里就已经结束了。