jQuery入门笔记之(四)动画效果

  • A+
所属分类:jQuery

 

jQuery自带动画效果

一. 显示、隐藏

jQuery中.show()为显示方法,.hide()为隐藏方法。

在无参数的时候,只是硬性的显示内容和隐藏内容。就不用代码来演示了,.hide()方法其实就是把对象的css设为display:none;而.show()方法会保留原来的display值,并进行设置。但是在一些场景中会有所改变,在后面进行说明)。

这两个方法都可以带参数。

先来说明第一个参数:

  1. 第一种用法是传入数字,为毫秒数,表示动画过渡效果的时间。里面同时富含了匀速变大变小,以及透明度变换。

2. 第二种用法是传入一个字符串。"slow"、"normal"和"fast",分别对应600毫秒、400毫秒和200毫秒。在传入空字符串或其他字符串参数时,默认为400毫秒。

3. 传入一个对象,后面的参数就不能填了,都在对象中。这个比较强大,整合了show()方法的多种参数实现效果外,还有一些其他的方法,比如可以动画执行中的状态,来执行函数。比较复杂,而且日常使用的话,现在这个就已经够了,在这里并不做讲述,有兴趣的可以自己参考手册。

特别注意:在传入了速度之后,内联元素inline,隐藏显示过后会变成内联块,inline-block。假设你给一个内联元素的css中设置了宽高,本来不生效,但是在执行隐藏显示后宽高生效

第二个参数:为可选参数,easing运动方式,这个参数,大部分参数值需要通过插件来使用,以后再来讲解。自带的参数有两个:"swing"(缓动)、"linear"(匀速),不填时,默认为"swing"。(注意这里传入一个错误参数,会报错)

第三个参数:可选,回调函数,第一个动画执行完毕后执行,实现链式动画。

我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判
断。而 jQuery 提供给我们一个类似功能的独立方法:.toggle()。使用方法一样。

二. 滑动、卷动

jQuery 提供了一组改变元素高度的方法:.slideUp()、.slideDown()和.slideToggle()。顾名思义,向上收缩(卷动)和向下展开(滑动)。

注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数。不展开讲

三. 淡入、淡出

jQuery 提供了一组专门用于透明度变化的方法:.fadeIn()和.fadeOut(),分别表示淡入、淡出,当然还有一个自动切换的方法:.fadeToggle()。

但是上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法,使透明度到达指定值:

注意:最先点击to透明度变成0.3,再点击toggle,第一次点击隐藏,第二次点击显示透明度为0.3!(回到原有设置)

淡入、淡出和上面的显示、隐藏效果一样,具有相同参数

自定义动画

jQuery提供了上面几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。

强烈建议先看我的《JavaScript完美运动框架的进阶之旅》,使用JS基本实现了自定义动画,只不过jQuery的更加全面完善,当然也更加复杂。

必传参数只有一个,对象,实现动画:

这段代码已经实现了多重动画同步运动的效果,使用键值对的方式,来表明运动动画终点的位置。在实现上下左右移动时,需要结合CSS,把物体属性设置绝对定位!

第二个参数,可选,使用字符串时如同上面一样的3个值表示不同的时间(默认400ms),数字类型时,使用毫秒方式。直接跟在第一个参数之后就好

第三个参数,可选,也和上面一样,easing运动方式,自带的参数有两个:"swing"(缓动)、"linear"(匀速),不填时,默认为"swing"。(注意这里传入一个错误参数,会报错)

第四个参数,可选,回调函数,在动画执行完毕后执行,可实现链式动画。

下面进行一些特殊的说明:

自定义动画中,每次开始运动都必须是初始位置或初始状态,而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。

主要是说一下自定义动画中的链式动画,有两种形式:

  1. 在回调函数中再执行一个动画,这个没什么好说的。
  2. 通过连缀或顺序来实现链式动画。

通过依次顺序实现链式动画

注意:如果不是同一个元素,就会实现同步动画

通过连缀实现链式动画

链式动画进阶

之前我们已经可以实现链式动画了,如果是同一个元素,可以依次顺序或连缀调用。如果是不同元素,可以使用回调函数。但有时链式动画太多,回调函数的可读性大大降低。为此,jQuery 提供了一组专门用于链式动画的方法。

$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');这段代码中,css方法会在一开始就执行。因为动画方法可以用连缀来实现依次排列,但是css方法不是,会在一开始传入队列之前。如何解决呢?回调函数当然可以实现。

这当然没问题,但是那并不是我们应该做的,因为这样可读性太差了,链式动画一多呢?原本的动画都不清晰了吧?jQuery为我们实现了一个类似回调函数的方法:.queue()。jQuery 的.queue()的回调函数可以传递一个参数,这个参数是 next 函数,在结尾处调用这个 next()方法即可再连缀执行列队动画。(不这样使用的话,后续动画效果无法实现)

.queue()方法还有一个功能,就是可以得到当前链式动画剩余的长度(包括当前的动画)。fx 是默认链条的参数。

jQuery 还提供了一个清理链式动画的功能方法:.clearQueue()。把它放入一个链式的回调函数或.queue()方法里,就可以把剩下未执行的链条给截断。

动画相关方法与全局属性

停止动画

有很多时候,我们需要停止正在运行中的动画,jQuery中为此提供了一个.stop()方法。

它有三个可选参数:

  1. queue 类型: String 停止链式动画的名称。(比较少用到,若存在,后两个参数都是指向该链式动画)
  2. clearQueue类型: Boolean一个布尔值,指示是否取消后续的链式动画。默认 false.
  3. jumpToEnd 类型: Boolean一个布尔值指示是否当前动画立即完成。默认false.

说明:

  1. 在无参数,且为链式动画时,调用.stop()方法,只是立即停止当前正在进行的动画,后续动画继续执行。
  2. 传入一个true时,立即停止动画,并且清空后续所有动画。
  3. 传入2个true时,立即停止,并且跳转到当前动画的结束位置,后续动画也不再执行。

代码如下:有兴趣的自行测试

延迟动画
有时在执行动画或链式动画时,需要在运动之前有延迟执行,jQuery 为此提供了.delay()方法。参数为延迟时间,单位为毫秒数。这个方法可以在动画之前设置延迟,也可 、以在列队动画中间加上。直接在上面代码任意地方加都可以,比较简单,自行测试吧。

获取正在进行的动画
在选择器的那篇文章中中,我们提到过一个过滤器:animated,这个过滤器可以判断出当前运动的动画是哪个元素。通过这个特点,我们可以避免由于用户快速在某个元素执行动画时,由于动画积累而导致的动画和用户的行为不一致。

对上面代码进行一些改造,将原div进行复制,添加到其后,给原div添加一个id并且在动画效果中改为该元素运动

动画全局属性

jQuery 提供了两种全局设置的属性,分别为:$.fx.interval,设置每秒运行的帧数;$.fx.off,关闭页面上所有的动画。

$.fx.interval 属性可以调整动画每秒的运行帧数,默认为 13 毫秒。数字越小越流畅,但可能影响浏览器性能。

设置运行帧数为 1000 毫秒:$.fx.interval = 1000;

设置动画为关闭 true:$.fx.off = true;默认为false

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: