Jquery动画,排队与并发

一、事件绑定

1.鼠标事件:模拟触发

什么是模拟触发?

虽然没有点在按钮上,也可以触发按钮的事件处理函数。

如何:$元素.trigger("事件名")

即使没有点在指定的元素上,也能触发该元素上绑定的事件处理函数。

简写:如果要触发的事件,刚好是21种简写中的一种,可使用事件处理函数一个函数两用的方法触发:

$元素.事件名()

强调:()中不要加处理函数

 

二、动画

简单动画:写死的固定不变的三种动画效果:

1.显示隐藏:.show()、.hide()、.toggle() 

问题:.show() 、.hide()不加参数时,默认使用display:block和display:none控制瞬间显示隐藏。

如果想有动画效果,必须加持续事件参数。

2.上滑下滑: .slideUp()、.slideDown()、.slideToggle()

3.淡入淡出:.fadeIn()、.fadeOut()、.fadeToggle()

简单动画所有函数的共性问题:

      1.效果是写死的!几乎不可维护!

      2.用js定时器和DOM操作模拟的动画效果-----效率极低

但是,.show()、.hide()、.toggle()在不加参数时,代替的是.css("display","block/none"),

这个是没有效率和可维护性损失的。所以,这三个不加参数的情况,还是非常推荐使用的。

 

2.万能动画:

什么是:可对任意css属性应用动画效果

何时:只要希望对任意css属性应用动画效果时

如何:

       1.$元素.animate({ css属性:目标值 } [动画持续时间,callback])

       2.让当前元素从现在的状态,经过指定的时间后,缓慢过渡到目标状态。

       3.强调:animate()中只需要些目标值,animate()可自动获得当前的对应属性值,自动计算变化的距离。

问题:

1.也是用js定时器和DOM操作模拟的动画效果

2.其实只支持单个数值的css属性,不支持CSS3动画,不支持颜色过渡。

 

排队和并发:

1.并发执行:多个css属性同时变化

如何:一个animate()内的多个css属性默认并发执行。

 

2.排队并发:多个css属性按顺序依次先后变化

如何:对同一个元素先后调用多次animate()函数,多次animate函数中的css属性是排队执行。

原理:其实在jq中,每个元素都有一个动画队列。

调用animate时,其实并不是立刻播放动画的意思,仅仅是将动画加入队列中保存

能否立刻执行动画,取决于当前动画之前是否有等待的或正在执行的其他动画。

 

在动画结束后自动执行:

问题:jq的动画函数都是用js定时器模拟的,所以都是异步的!

解决:每个动画函数都提供了最后一个参数,是一个回调函数。写在这个回调函数中的代码,

都是在动画结束后,才自动调用的。

 

停止动画:$元素.stop()

坑:默认只能停止当前正在播放的一个动画。如果队列中后续还有其他动画,则依然继续执行。

解决:$元素.stop(true)                 停止当前动画,且清除动画队列。

 

判断一个元素是否在播放jquery动画:

      1.:animated 选择器

      2.专门匹配正在播放动画的元素

4.类数组对象操作:

js中类数组对象很受歧视,长得像数组,但数组家的好用的函数,类数组对象都用不了。

但是,jq中创建的jq对象,都是类数组对象,于是,JQuery就为jq对象,模拟出了两个和数组家功能相似的函数:

1.遍历:

        js数组中:arr.forEach(function(elem,i,arr){....})

        jq中:$(查找结果).each(function(i,DOM元素){....})

        依次取出.前的查找结果集合中的每个DOM元素,执行相同的操作!

2.查找:js数组中:var i =arr.indexOf(值)

             js中:var i=$(查找结果).index(元素)              查找元素在结果集合中的位置i

 

上一篇:Animate.min.css框架运用


下一篇:11.jQuery之自定义动画