JQuery第五天之JQuery动画

这一节的内容是为各位小伙伴讲解一下JQuery中的动画

首先来介绍两个两个方法

hide():隐藏方法,()内也可以直接传入参数,也可以不穿,根据个人项目需要设置即可

show():显示方法,()内也可以直接传入参数,也可以不穿,根据个人项目需要设置即可

参数:1.可以直接传入数字类型的参数,数字类型的是以毫秒为单位    hide(1000)  1000表示的就是1秒

           2.可以是规定的slow(慢) normal(正常) fast(快)

例子:点击显示按钮,让div显示,点击隐藏按钮,让div隐藏

JQuery第五天之JQuery动画

注意:传入数字的时候不用带双引号,传入fast、normal、slow的时候必须要带双引号,才可以产生效果

案例:点击按钮,让多个div隐藏或者显示

JQuery第五天之JQuery动画

上面两个方法里面不仅可以带参数,而且还可以传入函数

另外的常用的动画方法

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的动画介绍到这里就已经结束了。