ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Jquery动画,排队与并发

2019-12-10 18:03:00  阅读:254  来源: 互联网

标签:Jquery 动画 函数 元素 js 并发 animate css


一、事件绑定

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

 

标签:Jquery,动画,函数,元素,js,并发,animate,css
来源: https://www.cnblogs.com/sna-ling/p/12018186.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有