ECMAScriptjQuery基础(四)—动画首

jQuery中隐藏元素的hide方法
受页面及之元素不可见,一般可以由此安装css的display为none属性。但是通过css直接修改是静态的布局,如果以代码执行的上,一般是透过js控制元素的style属性,这里jQuery提供了一个快速的方法.hide()来达到这个作用
$elem.hide()
供参数:
.hide( options )
当提供hide方法一个参数时,.hide()就见面化一个动画片方法。.hide()方法将会见配合配元素的增幅,高度,以及无透明度,同时展开动画操作
霎时参数:
.hide(“fast / slow”)
马上是一个动画设置的快捷方式,’fast’ 和 ‘slow’
分别表示200和600毫秒的延时,就是素会执行200/600毫秒的动画片后再也藏
注意:
jQuery在举行hide操作的时,是会保留自身的要素的原始属性值,再下通过相应之道还原的时段或初始值。比如一个因素的display属性值为inline,那么隐藏重新显时,这个因素以再显示inline。一旦透明度
达到0,display样式属性将受装也none,这个因素将不再在页面中影响布局

hide

测试一

hide操作

直接hide

测试一

hide动画操作

hide带动画

jQuery中显得元素的show方法
css中有display:none属性,同时也出display:block,所以jQuery同样提供了与hide相反的show方法
方法的用几乎跟hide是平的,hide是为要素显示到隐藏,show则是倒,让要素于影到展示
在押同样段代码:使用及平等,结果相反
$(‘elem’).hide(3000).show(3000)
深受要素执行3秒的隐没动画,然后实施3秒的显得动画。
show与hide方法是那个常用之,但是一般生少会冲这2只属性执行动画,大多情况下还是直接操作元素的显得与潜伏为主
注意事项:
show与hide方法是改的display属性,通过是visibility属性布局要经过css方法单独设置
如利用!important在你的体裁中,比如display: none
!important,如果你希望.show()方法正常工作,必须使用.css(‘display’,
‘block !important’)重写样式
使被show与hide成为一个动画片,那么默认执行动画会改变元素的莫大,高度,透明度

jQuery中显示与隐藏切换toggle方法
show与hide是如出一辙针对互斥的计。需要对素进行展示隐藏的排外切换,通常状态是需要事先判断元素的display状态,然后调用该对应之处理办法。比如显示的元素,那么快要调用hide,反之亦然。
对于这么的操作行为,jQuery提供了一个便利方式toggle用于切换显示或隐藏匹配元素
主导的操作:toggle();
即时是不过核心的操作,处理元素显示或者藏,因为未牵动参数,所以并未动画。通过改变CSS的display属性,匹配的要素将让马上亮或躲藏,没有动画。
使元素是初显示,它见面吃埋伏
一经隐藏的,它会显得出
display属性将让储存并且需要的时段可还原。如果一个要素的display值为inline,然后是藏匿和显示,这个因素用再也显示inline
供参数:.toggle( [duration ] [, complete ] )
平等的提供了岁月、还有动画结束之回调。在参数对应的辰内,元素会产生显示/隐藏的变更,在反的过程被见面将元素的赛、宽、不透明度进行相同名目繁多动画效果。这个元素其实就算是show与hide的主意
一直定位:.toggle(display)
直白提供一个参数,指定要改之要素的最终效果
骨子里就是是规定是动show还是hide方法
if ( display === true ) {
$( “elem” ).show();
} else if ( display === false ) {
$( “elem” ).hide();
}

jQuery中生带动画slideDown
对于藏的因素,在用那出示出来的历程被,可以针对其展开一些浮动之卡通片效果。之前学过了show方法,show方法以显示的进程被呢堪生动画,但是.show()方法将会晤配合配元素的肥瘦,高度,以及不透明度,同时进行动画操作。这里就要学习一个初的来得方式slideDown方法
.slideDown():用滑动动画显示一个匹配元素
.slideDown()方法将被匹配元素的高度的动画,这会招致页面的下面有滑行下来,弥补了展示的办法
大规模的操作,提供一个卡通是时空,然后传递一个回调,用于知道动画是什么时候结束
.slideDown( [duration ] [, complete ] )
持续时间(duration)是盖毫秒为单位的,数值越老,动画越慢,不是更进一步快。字符串
‘fast’ 和 ‘slow’
分别表示200以及600毫秒的延时。如果提供任何其它字符串,或者是duration参数为略去,那么默认使用400
毫秒的延时。
现实运用:
$(“ele”).slideDown(1000, function() {
//等待动画执行1秒后,执行别的动作….
});
注意事项:
下拉动画是自从无到有,所以同样开始元素是用事先躲起来的,可以安装display:none

果提供回调函数参数,callback会在动画就的上调用。将不同之卡通串联在一块以顺序排列执行是大有效之。这个回调函数不安装任何参数,但是
this会设成将要执行动画的酷DOM元素,如果多独元素并开动画效果,那么要十分上心,回调函数会在各国一个因素执行完动画后都推行同一不行,而非是马上组
动画整体才行同一糟糕

jQuery中达到卷动画slideUp
对此显示的因素,在以那个藏的历程中,可以本着其开展局部变型的动画效果。之前学了了hide方法,hide方法在展示的进程遭到呢可生出动画,但
是.hide()方法以为配合配元素的宽,高度,以及未透明度,同时进行动画操作。这里将学习一个初的展示方式slideUp方法
最为简便易行的运用:不带来参数
$(“elem”).slideUp();
此利用的含义就是是:找到元素的冲天,然后用一个下滑动画让要素一直滑到隐蔽,当高度为0的时候,也就是不可见的常,修改元素display
样式属性为安装为none。这样即便能确保这元素不见面影响页面布局了
带参数:
.slideUp( [duration ] [, easing ] [, complete ] )
一样可以提供一个时刻,然后可以应用同样种过渡使用啊种缓动函数,jQuery默认就2种植,可以由此下载插件支持。最后一个卡通结束的回调方法。
因为动画是异步的,所以要是以动画之后执行某些操作就不能不要写到回调函数里面,这里而特别注意

jQuery中上卷下拉切换slideToggle
slideDown与slideUp是同一对准倒的主意。需要针对素进行上下拉卷效果的切换,jQuery提供了一个方便措施slideToggle用滑动动画显示或潜伏一个匹配元素
中心的操作:slideToggle();
随即是最好基本的操作,获取元素的可观,使这个元素的冲天有转移,从而为要素里之始末为生要朝向上滑动。
提供参数:.slideToggle( [duration ] ,[ complete ] )
一样的提供了岁月、还有动画结束之回调。在参数对应的日子内,元素会完结动画,然后起身回调函数
与此同时也供了时间之迅猛定义,字符串 ‘fast’ 和 ‘slow’
分别表示200同600毫秒的延时
slideToggle(“fast”)
slideToggle(“slow”)
注意:
display属性值保存在jQuery的多寡缓存中,所以display可以一本万利以后可以恢复到那个初始值
当一个隐形动画后,高度值达到0的时光,display
样式属性被装也none,以保证该因素不再影响页面布局

jQuery中没落出动画fadeOut
让要素于页面不可见,常用之章程就是是经安装样式的display:none。除此之外还好有类似之法可以齐这个目的。这里要取一个透明度的计,设置元素透明度为0,可以于要素不可见,透明度的参数是0~1之间的值,通过变更者价好让要素来一个透明度的效能。常见的淡入淡出动画正是这么的原理。
fadeOut()函数用于隐藏所有匹配的元素,并涵盖淡出的连通动画效果
所谓”淡出”隐藏的,元素是隐藏状态不针对犯外改动,元素是可见的,则将该隐藏。
.fadeOut( [duration ], [ complete ] )
经不透明度的变更来落实所有匹配元素的淡出效益,并在动画就后只是选地触发一个回调函数。这个动画就调整元素的未透明度,也就是说有匹配的素的万丈和宽不见面发生变化。
字符串 ‘fast’ 和 ‘slow’
分别表示200与600毫秒的延时。如果提供其他其他字符串,或者这duration参数为略去,那么默认使用400毫秒的延时

  $("p").fadeOut(1000, "linear");

jQuery中淡入动画fadeIn
fadeOut是脱效果,相反的还有淡入效果fadeIn,方法应用及双方都是同样的,只是结果反倒
.fadeIn( [duration ], [ complete ] )
duration:指定过渡动画运行多长时间(毫秒数),默认值为400。该参数为足以吧字符串”fast”(=200)或”slow”(=600)。
要素显示了后需要实行之函数。函数内的this指向当前DOM元素。
fadeIn()函数用于展示有匹配的因素,并涵盖淡入的连片动画效果。
注意:
淡入的卡通片原理:操作元素的非透明度从0%日渐增多到100%
一经元素本身是可见的,不对准该犯任何改变。如果元素是隐藏的,则使该可见

jQuery中淡入淡出切换fadeToggle
fadeToggle()函数用于切换所有匹配的因素,并含有淡入/淡出的连结动画效果。之前也套了toggle、slideToggle
也是类似的处理方式
fadeToggle切换fadeOut与fadeIn效果,所谓”切换”,即如元素即是可见的,则拿该逃匿(淡出);如果元素即凡隐形的,则使该出示(淡入)。
常用语法:.fadeToggle( [duration ] ,[ complete ] )
然而选的 duration 参数规定职能的时长。它可以取以下值:”slow”、”fast”
或毫秒。 可挑选的 callback 参数是 fadeToggle完成后所实行的函数名称。
fadeToggle() 方法可以以 fadeIn() 与 fadeOut()
方法中展开切换。如果元素都退出,则 fadeToggle()
会向元素添加淡入效果。如果元素都淡入,则 fadeToggle()
会向元素添加淡出效益。

jQuery中淡入效果fadeTo
淡入淡出fadeIn与fadeOut都是改元素样式的opacity属性,但是她们还发生只共同的特色,变化之间隔要么是0,要么是1
fadeIn:淡入效果,内容展示,opacity是0到1
fadeOut:淡出效果,内容隐藏,opacity是1到0
倘假定给要素保持动画效果,执行opacity = 0.5之效能时,要什么样处理?
要无考虑CSS3,我们所以JS实现的话,基本就是是通过定时器,在设定的时刻外一点点之改动opacity的值,最终为0.5,原理虽说简单,但是总不如一键安这样舒畅,jQuery提供了fadeTo方法,可以于改变透明度一步到位
语法
.fadeTo( duration, opacity ,callback)
必备的 duration参数规定职能的时长。它可以取以下值:”slow”、”fast”
或毫秒。fadeTo() 方法被不可或缺的 opacity
参数将淡入淡出效果设置也加的免透明度(值介于 0 与 1 之间)。可摘的
callback 参数是拖欠函数完成后所执行之函数名称。

jQuery中toggle与slideToggle以及fadeToggle的比较
操作元素的示和隐形可以来几栽办法。
例如:
反样式display为none
装职务高度为0
装透明度为0
都能达这个目的,并且针对这样的处理jQuery都提供了分别的道。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外,还引入了toggle、sildeToggle以及fadeToggle切换方式
toggle、sildeToggle以及fadeToggle的区别:
toggle:切换显示和潜伏效果
sildeToggle:切换上下拉卷滚效果
fadeToggle:切换淡入淡出效果
当细节上还是有重新多之不同点:

toggle与slideToggle细节区别:
toggle:动态效果为自右侧至左。横向动作,toggle通过display来判定切换所有匹配元素的可见性
slideToggle:动态效果从下至上。竖向动作,slideToggle
通过高度变化来切换所有匹配元素的可见性
fadeToggle方法
fadeToggle() 方法以 fadeIn() 和 fadeOut() 方法中切换。
素是离显示的,fadeToggle() 会使用淡入效果亮她。
要素是淡入显示的,fadeToggle() 会使用离效果亮它。
注解:隐藏的素不会见为全亮(不再影响页面的布局)

jQuery中动画animate(上)
些微复杂的卡通片通过事先学到的几乎单卡通函数是休可知落实,这时候就待强大的animate方法了
操作一个因素执行3秒的淡入动画,对比一下2组动画设置的别
$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)
显而易见,animate方法更加灵活了,可以精确的主宰样式属性从而执行动画
语法:
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
.animate()方法允许我们以肆意的数值的CSS属性上创办动画。2种植语法使用,几乎差不多了,唯一必要的性能就是平组CSS属性键值对。这组属性和用于设置.css()方法的性质键值对类似,除了属性范围做了重复多克。第二独参数开始好独自传递多单实参也堪统一成为一个靶传递了
参数分解:
properties:一个要多单css属性的键值对所结合的Object对象。要特别注意所有用于动画的特性必须是数字之,除非其他发征;这些性如果非是数字之用非能够利用基本的jQuery功能。比如大规模的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能起动画效果的。background-color很鲜明不得以,因为参数是red或者GBG这样的价值,非常用插件,否则正常情形下是匪可知只是所以动画效果的。注意,CSS
样式使用 DOM 名称(比如 “fontSize”)来设置,而无 CSS 名称(比如
“font-size”)。
特别注意单位,属性值的单位像素(px),除非其他发证实。单位em 和
%待指定使用
.animate({
left: 50,
width: ’50px’
opacity: ‘show’,
fontSize: “10em”,
}, 500);
除了定义数价值,每个属性能使用’show’, ‘hide’, 和
‘toggle’。这些快捷方式允许定制隐藏和出示动画用来支配元素的展示或潜伏
.animate({
width: “toggle”
});
如若提供一个缘+= 或
-=开始之价,那么目标价就是为之特性的当前价值长要减少给定的数字来算的
.animate({
left: ‘+=50px’
}, “slow”);
duration时间
动画片执行的时刻,持续时间是为毫秒为单位的;值更怪表示动画执行之越慢,不是尤为快。还可提供’fast’
和 ‘slow’字符串,分别代表持续时间为200 和 600毫秒。
easing动画运动的算法
jQuery库中默认调用 swing。如果用另的卡通算法,请找有关的插件
complete回调
动画就时实行的函数,这个可以包当前动画确定就后发会触发

Query中动画animate(上)
小复杂的卡通片通过事先学到的几乎只卡通函数是休可知落实,这时候就得强大的animate方法了
操作一个因素执行3秒的淡入动画,对比一下2组动画设置的别
$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)
阳,animate方法更灵敏了,可以准确的操纵样式属性从而执行动画
语法:
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
.animate()方法允许我们于随机的数值的CSS属性上创立动画。2种植语法使用,几乎差不多了,唯一必要之习性就是一致组CSS属性键值对。这组属性和用来设置.css()方法的性能键值对近似,除了属性范围做了又多克。第二单参数开始好独自传递多只实参也得以合成为一个靶传递了
参数分解:
properties:一个或者多独css属性的键值对所构成的Object对象。要特别注意所有用于动画的性质必须是数字之,除非其他发认证;这些性如果无是数字的拿未能够用基本的jQuery功能。比如大规模的,border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些还是会出动画效果的。background-color很显著不可以,因为参数是red或者GBG这样的价值,非常用插件,否则正常状况下是休可知单纯所以动画效果的。注意,CSS
样式使用 DOM 名称(比如 “fontSize”)来安,而无 CSS 名称(比如
“font-size”)。
特别注意单位,属性值的单位像素(px),除非其他起说明。单位em 和
%亟需指定使用
.animate({
left: 50,
width: ’50px’
opacity: ‘show’,
fontSize: “10em”,
}, 500);
除了定义数价值,每个属性能使用’show’, ‘hide’, 和
‘toggle’。这些快捷方式允许定制隐藏和出示动画用来支配元素的显示或隐藏
.animate({
width: “toggle”
});
倘若提供一个因为+= 或
-=开始之价值,那么目标价就是是为这特性之当前值长要减少给定的数字来算的
.animate({
left: ‘+=50px’
}, “slow”);
duration时间
卡通执行的年华,持续时间是坐毫秒为单位之;值更充分表示动画执行的越慢,不是越来越快。还可以提供’fast’
和 ‘slow’字符串,分别表示持续时间为200 和 600毫秒。
easing动画运动的算法
jQuery库中默认调用 swing。如果急需其他的动画算法,请找有关的插件
complete回调
动画就时实行之函数,这个得包当前动画确定就后发会触发

DOM是js的同片,所以标识符只能出于下划线、字母、数字和$组成,CSS中属性名类似font-size有根横线,DOM不支持其当做标志符,所以改成为了驼峰命名法。
font-size = fontSize
margin-left = marginLeft…

jQuery中动画animate(下)
animate在实施动画中,如果急需着眼动画的片实践情况,或者当动画进行中的某部平随时进行一些任何处理,我们好透过animate提供的第二种设置语法,传递一个目标参数,可以拿到动画执行状态有通报
.animate( properties, options )
options参数
duration – 设置动画执行的年华
easing – 规定而运的 easing 函数,过渡使用啊种缓动函数
step:规定每个动画的诸一样步成功以后要推行之函数
progress:每一样赖动画调用的时段会实行这个回调,就是一个速度的概念
complete:动画就回调
其间最重大之某些就是是:
倘若多独因素执行动画,回调将以每个匹配的因素上实行同样次等,不是用作全动画执行同一不成
排有常用的计:
$(‘#elem’).animate({
width: ‘toggle’,
height: ‘toggle’
}, {
duration: 5000,
specialEasing: {
width: ‘linear’,
height: ‘easeOutBounce’
},
complete: function() {
$(this).after(‘

Animation complete.

‘);
}
});

jQuery中已动画stop
卡通在推行进程遭到是容为搁浅的,当一个素调用.stop()方法,当前着运转的动画片(如果有的言语)立即停下
语法:
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop还有几独可卜的参数,简单来说可以马上3栽情况
.stop(); 停止当前卡通,点击在暂停处继续开始
.stop(true);
如果同一元素调用多单卡通方法,尚未为实施之卡通被放置于要素的效力排中。这些动画片不会见起来,直到第一单就。当调用.stop()的早晚,队列中的生一个卡通就开始。如果clearQueue参数提供true值,那么以列中的动画片其余被去除并永久不会见运作
.stop(true,true); 当前卡通将适可而止,但该因素上之 CSS
属性会于马上改成动画的对象价
简单易行的说:参考下面代码、
$(“#aaron”).animate({
height: 300
}, 5000)
$(“#aaron”).animate({
width: 300
}, 5000)
$(“#aaron”).animate({
opacity: 0.6
}, 2000)
stop():只会已第一只卡通,第二独第三独连续
stop(true):停止第一个、第二单跟老三单卡通
stop(true ture):停止动画,直接跨越到第一独卡通的末段状态

jQuery中each方法的行使
jQuery中出只好关键的中心方法each,大部分jQuery方法以中间都见面调用each,其利害攸关的由之就是jQuery的实例是一个元素合集
一般来说:找到有的div,并且还安样式,css只是一个方,所以中间会调用each处理者div的合集,给每个div都安装style属性
$(‘div’).css(…)
jQuery的大部分智还是针元素合集的操作,所以jQuery会提供$(selector).each()来任何历jQuery对象
.each只是处理jQuery对象的计,jQuery还提供了一个通用的jQuery.each方法,用来拍卖对象与频繁组的遍历
语法
jQuery.each(array, callback )
jQuery.each( object, callback )
第一独参数传递的哪怕是一个对象要数组,第二单凡是回调函数
$.each([“Aaron”, “慕课网”], function(index, value) {
//index是索引,也不怕是累组的目录
//value就是数组中之价了
});
each就是for循环方法的一个封装,内部就经过for遍历数组与目标,通过回调函数返回内部迭代的一部分参数,第一个参数是眼下迭代成员在目标或数组中的索引值(从0开始计数),第二只参数是时迭代成员(与this的援相同
jQuery.each()函数还会见冲每次调用函数callback的回值来控制继续动作。如果回到回值为false,则停循环(相当给平常循环中之break);如果回去外任何价值,均代表继续执行下一个循环。
$.each([“Aaron”, “慕课网”], function(index, value) {
return false; //停止迭代
});

jQuery方法可充分有益于的遍历一个数量,不待考虑这数额是目标或数组

jQuery中觅数组中之索引inArray
在PHP有in_array()判断有元素是否存在数组中,JavaScript却无,但是jQuery封装了inArray()函数判断元素是否有数组被。注意了:在ECMAScript5曾经生数据的indexOf方法支持了,但是jQuery保持了本子向下兼容,所以封装了一个inArray方法
jQuery.inArray()函数用于在频繁组被找找指定的值,并回到其索引值。如果数组中不存在该值,则回
-1。
语法:
jQuery.inArray( value, array ,[ fromIndex ] )
故此法非常简单,传递一个检测的对象价,然后传递原始的累累组,可以通过fromIndex规定查找的开头值,默认数组是0开始
诸如:在反复组被查找值是5底目录
$.inArray(5,[1,2,3,4,5,6,7]) //返回对应之目:4
注意:
若果一旦看清数组中是否在指定值,你用通过该函数的归来值未抵(或过)-1来拓展判断

jQuery中错过空格神器trim方法
页面中,通过input可以抱用户的输入值,例如常见的报到信息之付出处理。用户的输入不自然是业内的,输入一段子密码:’
1123456 “,注意了:
密码的内外会养空,这或许是用户的下意识之行事,但是密码真的以不曾错,针对如此的行,开发者应该要咬定输入值的前后是否发空白符、换行符、制表符这样明确的架空的输入值。
jQuery.trim()函数用于去字符串两端的空白字符
这函数很简短,没有剩余的参数用法
内需专注:
变除字符串开始同结尾处的兼具换行符,空格(包括连日来的空格)和制表符(tab)
假若这些空白字符在字符串中间时,它们将吃保留,不会见给移除

jQuery中DOM元素的获get方法
jQuery是一个合集对象,如果需要单独操作合集中之之某部一个元素,可以经过.get()方法赢得到
以下有3单a元素结构:
1
2
3
通过jQuery获取有的a元素合集$(“a”),如果想越在并集中找到第二2单dom元素单独处理,可以透过get方法
语法:
.get( [index ] )
注意2点
get方法是收获之dom对象,也不怕是经过document.getElementById获取的靶子
get方法是从0开始索引
据此亚个a元素的寻找: $(a).get(1)
负索引值参数
get方法还得由晚往前方索引,传递一个负索引值,注意的负值的追寻引起始值是-1
同样是找到第二元素,可以传递 $(a).get(-2)

jQuery中DOM元素的博index方法
get方法是经过既掌握之目在同步集中找到呼应的因素。如果转,已知元素如何以联名集中找到呼应的目呢?
.index()方法,从匹配的因素中搜寻于定元素的索引值,从0开始计数。
语法:参数接受一个jQuery或者dom对象作为找的条件
.index()
.index( selector )
.index( element )
设非传递任何参数为 .index()
方法,则赶回值就是jQuery对象吃首先单因素相对于它同辈元素的职位
一经在同一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象,
.index() 返回值就是传播的元素相对于原来集合的位置
假若参数是一个选择器, .index()
返回值就是原元素相对于选择器匹配元素的职位。如果找不交相当的因素,则
.index() 返回 -1
简来说:

  • 1
  • 2
  • 3

$(“li”).index()
没有传递参数,反正的结果是1,它的意是回来同辈的排列循序,第一个li之前来a元素,同辈元素是a开始也0,所以li的上马索引是1
要一旦快快找到第二个li在列表中之目,可以透过如下2种植方法处理
$(“li”).index(document.getElementById(“test2”)) //结果:1
$(“li”).index($(“#test2”)) //结果:1