jQuery动画效果的实现

jQuery效果

jQuery给我们封装了很多动画效果,最常见的如下:

显示与隐藏:show()、hide()、toggle()

滑动:slideDown()、slideUp()、slideToggle()

淡入淡出:fadeIn()、fadeOut()、fadeToggle()、fadeTo()

自定义动画:animate()

1 显示隐藏效果

1. 语法

show([speed],[easing],[fn])显示

hide([speed],[easing],[fn])隐藏

toggle([speed],[easing],[fn])显示与隐藏来回切换

2. 参数

  • 参数都可以省略,无动画直接显示。

  • speed:三种表示速度的字符串(“slow”,“normal”,“fast”) 或表示动画时长的毫秒数(如:1000)

  • easing:用来指定切换效果,默认是"swing" ,可用参数"linear"

  • fn:回调函数,在动画完成时执行的函数

2 滑动效果

1.语法

slideDown([speed],[easing],[fn])向下滑动

slideDown([speed],[easing],[fn])向上滑动

slideDown([speed],[easing],[fn])滑动切换

2. 参数

  • 参数都可以省略,无动画直接显示。

  • speed:三种表示速度的字符串(“slow”,“normal”,“fast”) 或表示动画时长的毫秒数(如:1000)

  • easing:用来指定切换效果,默认是"swing" ,可用参数"linear"

  • fn:回调函数,在动画完成时执行的函数

3 事件切换

hover([over],out)

  • over:是鼠标移动到元素上要触发的函数(相当于mouseenter) 可以不写此参数
  • out:鼠标移出元素要触发的函数(相当于mouseleave)
  • 只写一个函数的时候,鼠标移动和鼠标离开都执行此函数

鼠标移入和鼠标移出事件就可以简写为以下代码:

$("button").hover(function(){
     $("div").slidetoggle();
})
4 动画队列及其停止排队方法

1. 动画或效果队列

动画或效果一旦触发就会执行,如果多次触发,就造成多个动画或效果排队执行。

2. 停止排队

stop()

  • stop()方法用于停止动画或效果
  • 注意:stop()写到动画或者效果的前面,相当于结束上一次的动画
$("button").hover(function(){
     $("div").stop().slidetoggle();
})
5 淡入淡出效果

1. 语法

fadeIn([speed],[easing],[fn])淡入

fadeOut([speed],[easing],[fn])淡出

fadeToggele([speed],[easing],[fn])淡入淡出切换

fadeTo(speed,opacity,[easing],[fn]) 渐进方式调整到指定的不透明度(注:speed和opacity为必选参数)

2. 参数

  • 无特殊说明参数都可以省略,无动画直接显示。

  • speed:三种表示速度的字符串(“slow”,“normal”,“fast”) 或表示动画时长的毫秒数(如:1000)

  • easing:用来指定切换效果,默认是"swing" ,可用参数"linear"

  • fn:回调函数,在动画完成时执行的函数

  • opacity:透明度 必须写,取值0~1之间。

6 自定义动画animata

1. 语法

animate(params,[speed],[easing],[fn])

2. 参数

  • params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法,如:borderLeft,其余参数都可以省略
$("button").click(function() {
  $("div").animate({
     left:200,
     top:300,
     opacity:.5,
     width:"500px"
   },500)
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值