【Jquery-04】jq中动画效果

jQuery效果

最为常见的效果

效果 方法
显示隐藏 show()\hide()\toggle()
滑动 slideDown()、slideUp()、slideToggle()
淡入淡出 fadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画 animate()

3.1显示隐藏效果

1.语法格式
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
显示参数
1）参数都可以省略，无动画直接显示

2）speed：三种预定速度之一的字符串（“show”、“normal”、“or”、“fast”）或表示动画市场的毫秒值1000

3）easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"

4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次

3.2滑动效果

slideDown([speed,[easing],[fn]])//下滑效果
slideUp([speed,[easing],[fn]])//上滑效果
slideToggle([speed,[easing],[fn]])//滑动效果
参数效果同上

3.3事件切换

hover([over],out)//事件切换
over：鼠标移动到元素上触发的函数（相当于mouseenter）

out：鼠标移出元素要触发的函数（相当于mouseleave）

如果只写一个函数，则鼠标经过和离开都会触发它

3.4动画队列及停止排队的方法
动画一旦触发就会被执行，如果多次触发，就造成多个动画或者效果排队执行

1.停止排队
可以接收两个参数：第一个是否清空当前动画队列，布尔类型，第二个参数是否立即完成当前动画也是布尔类型，当我们不传参数，默认是false，表示立即进入下一个动画，停止当前的动画，使用最多的情况是不传参

stop()
1)stop() 方法用于停止动画或效果

2）注意：stop()写到动画或者效果的前面，相当于定制结束才上一次的动画

3.5淡入淡出效果
1.淡入淡出效果
fadeIn([speed,[easing],[fn]])//淡入效果
fadeOut([speed,[easing],[fn]])//淡出效果
fadeToggle([speed,[easing],[fn]])//淡入淡出
参数效果同上

2.渐进方式调整到指定不透明度
fadeTo([[speend],opacity,[easing],[fn]])
参数：==opacity:==透明度值必写，取值0-1之间

speed：三种预定速度之一的字符串（“show”,“normal”,“fast”）或表示动画时长的毫秒数

3.4自定义动画

animate({},[speed],[easing],[fn])
参数：

1.params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要，采取双驼峰命名法borderLeft，其余参数可以省略，传入的是对象形式，一组包含作为动画的属性及其值的集合，left，right，top。bottom一类适用于定位的属性，margin，padding，width，height等高度或者宽度，fontSize border等，但是backgroundColor 不可以使用，需引入插件之后才能使用

3.5延迟的内容
delay(设置毫秒数) 设置一个延迟来推迟执行队列中之后的项目，等待设置的毫秒数结束之后，再开始执行下面的内容

$(“.box”).delay(2000).fadeOut(200)