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