【Jquery-04】jq中动画效果
文章目录
- jQuery效果
- 3.1显示隐藏效果
- 3.2滑动效果
- 3.3事件切换
- 3.4自定义动画
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)