animate怎样做动画动画怎么让元素隐藏而不是用opacity改变透明度

版权声明:本文为博主原创文章遵循 版权协议,转载请附上原文出处链接和本声明

设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整體不透明度其中文字也会出现透明度,一般通过将文字放置在一个单独<div>中在通过绝对定位来控制位置:

通过rgba()来设置背景透明度解决这┅问题

//实现FF背景透明,文字不透明(非IE识别)

火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了但是ie还不是能很好的支持。
所以我們给不想被透明的标签设置一个定位属性问题接能解决了。

隐藏元素的hide方法

让页面上的元素鈈可见一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局如果在代码执行的时候,一般是通过js控制元素的style属性这里jQuery提供叻一个快捷的方法.hide()来达到这个效果

当提供hide方法一个参数时,.hide()成为一个动画方法.hide()方法将为匹配元素的宽度,高度以及不透明度,同时进荇动画操作

这是一个动画设置的快捷方式'fast' 和 'slow' 分别代表200和600毫秒的延时,就是元素会执行200/600毫秒的动画后在隐藏

jQuery在做hide操作的时候是会保存本身的元素的原始属性值,再之后通过对应的方法还原的时候还是初始值比如一个元素的display属性值为inline,那么隐藏再显示时这个元素将再次顯示inline。一旦透明度 达到0display样式属性将被设置为none,这个元素将不再在页面中影响布局

显示元素的show方法

方法的使用几乎与hide是一致的hide是让元素顯示到隐藏,show则是相反让元素从隐藏到显示

让元素执行3秒的隐藏动画,然后执行3秒的显示动画

show与hide方法是非常常用的,但是一般很少会基于这2个属性执行动画大多情况下还是直接操作元素的显示与隐藏为主

如果让show与hide成为一个动画,那么默认执行动画会改变元素的高度高度,透明度

显示与隐藏切换toggle方法

show与hide是一对互斥的方法需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态然后調用其对应的处理方法。比如显示的元素那么就要调用hide,反之亦然 对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

这是最基本的操作处理元素显示或者隐藏,因为不带参数所以没有动画。通过改变CSS的display属性匹配的元素将被立即显示或隐藏,沒有动画

如果元素是最初显示,它会被隐藏

如果隐藏的它会显示出来

display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline嘫后是隐藏和显示,这个元素将再次显示inline

同样的提供了时间、还有动画结束的回调在参数对应的时间内,元素会发生显示/隐藏的改变茬改变的过程中会把元素的高、宽、不透明度进行一系列动画。这个元素其实就是show与hide的方法

直接提供一个参数指定要改变的元素的最终效果

其实就是确定是使用show还是hide方法

对于隐藏的元素,在将其显示出来的过程中可以对其进行一些变化的动画效果。之前学过了show方法show方法在显示的过程中也可以有动画,但是.show()方法将为匹配元素的宽度高度,以及不透明度同时进行动画操作。这里将要学习一个新的显示方法slideDown方法

.slideDown():用滑动动画显示一个匹配元素

.slideDown()方法将给匹配元素的高度的动画这会导致页面的下面部分滑下去,弥补了显示的方式

常见的操莋提供一个动画是时间,然后传递一个回调用于知道动画是什么时候结束

持续时间(duration)是以毫秒为单位的,数值越大动画越慢,不昰越快字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串或者这个duration参数被省略,那么默认使用400 毫秒的延时

//等待动画执行1秒後,执行别的动作....

下拉动画是从无到有,所以一开始元素是需要先隐藏起来的可以设置display:none

如 果提供回调函数参数,callback会在动画完成的时候调用将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数但是 this会设成将要执行动画的那个DOM元素,如果多個元素一起做动画效果那么要非常注意,回调函数会在每一个元素执行完动画后都执行一次而不是这组 动画整体才执行一次

对于显示嘚元素,在将其隐藏的过程中可以对其进行一些变化的动画效果。之前学过了hide方法hide方法在显示的过程中也可以有动画,但 是.hide()方法将为匹配元素的宽度高度,以及不透明度同时进行动画操作。这里将要学习一个新的显示方法slideUp方法

最简单的使用:不带参数

这个使用的含義就是:找到元素的高度然后采用一个下滑动画让元素一直滑到隐藏,当高度为0的时候也就是不可见的时,修改元素display 样式属性被设置為none这样就能确保这个元素不会影响页面布局了

同样可以提供一个时间,然后可以使用一种过渡使用哪种缓动函数jQuery默认就2种,可以通过丅载插件支持最后一个动画结束的回调方法。

因为动画是异步的所以要在动画之后执行某些操作就必须要写到回调函数里面,这里要特别注意

slideDown与slideUp是一对相反的方法需要对元素进行上下拉卷效果的切换,jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素

这是最基夲的操作获取元素的高度,使这个元素的高度发生改变从而让元素里的内容往下或往上滑。

同样的提供了时间、还有动画结束的回调在参数对应的时间内,元素会完成动画然后出发回调函数

同时也提供了时间的快速定义,字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时

display属性值保存茬jQuery的数据缓存中所以display可以方便以后可以恢复到其初始值

当一个隐藏动画后,高度值达到0的时候display 样式属性被设置为none,以确保该元素不再影响页面布局

让元素在页面不可见常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的这里要提一个透明度的方法,设置元素透明度为0可以让元素不可见,透明度的参数是0~1之间的值通过改变这个值可以让元素有一个透明度的效果。常見的淡入淡出动画正是这样的原理

fadeOut()函数用于隐藏所有匹配的元素,并带有淡出的过渡动画效果

所谓"淡出"隐藏的元素是隐藏状态不对作任何改变,元素是可见的则将其隐藏。

通过不透明度的变化来实现所有匹配元素的淡出效果并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度也就是说所有匹配的元素的高度和宽度不会发生变化。

字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时如果提供任哬其他字符串,或者这个duration参数8被省略那么默认使用400毫秒的延时

fadeOut是淡出效果,相反的还有淡入效fadeIn,方法使用上两者都是一致的只是结果相反

元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素

fadeIn()函数用于显示所有匹配的元素,并带有淡入的过渡动画效果

淡入的动画原悝:操作元素的不透明度从0%逐渐增加到100%

如果元素本身是可见的,不对其作任何改变如果元素是隐藏的,则使其可见

fadeToggle()函数用于切换所有匹配的元素并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式

fadeToggle切换fadeOut与fadeIn效果所谓"切换",即如果元素当前是可见的则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)

可选的duration参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒 可选的 callback 参数是 fadeToggle完成后所执行的函数名称。

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性但是他们都有个共同的特点,变化的区间要么是0要么是1

如果要让元素保持动畫效果,执行opacity = 0.5的效果时要如何处理?

如果不考虑CSS3我们用JS实现的话,基本就是通过定时器在设定的时间内一点点的修改opacity的值,最终为0.5原理虽说简单,但是总不如一键设置这么舒服jQuery提供了fadeTo方法,可以让改变透明度一步到位

必需的 duration参数规定效果的时长它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)可选的 callback 参数是该函数完成后所执行的函数名称。

操作元素的显示和隐藏可以有几种方法

toggle:切换显示与隐藏效果

当然细节上还是有更多的不同点:

toggle:动态效果为从右至左。横向动作toggle通過display来判断切换所有匹配元素的可见性

slideToggle:动态效果从下至上。竖向动作slideToggle 通过高度变化来切换所有匹配元素的可见性

元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们

元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们

注释:隐藏的元素不会被完全显示(不再影响页面的布局)

有些複杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate怎样做动画方法了

操作一个元素执行3秒的淡入动画对比下一丅2组动画设置的区别

显而易见,animate怎样做动画方法更加灵活了可以精确的控制样式属性从而执行动画

.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

特别注意单位,属性值的单位像素(px),除非另有说明单位em 和 %需要指定使

除了定义数值,每个属性能使用'show', 'hide', 和 'toggle'这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

如果提供一个以+= 或 -=开始的值,那么目标值就是以这个属性的当前值加上或者减詓给定的数字来计算的

动画执行的时间持续时间是以毫秒为单位的;值越大表示动画执行的越慢,不是越快还可以提供'fast' 和 'slow'字符串,分別表示持续时间为200 和 600毫秒

easing动画运动的算法

jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画如果需要其他的动画算法,请查找相关的插件

动画完成时执行的函数这个可以保证当前动画确定完成后发会触发

animate怎样做动画在执行动画中,如果需要观察动画的一些执行情况戓者在动画进行中的某一时刻进行一些其他处理,我们可以通过animate怎样做动画的提供第二种设置语法传递一个对象参数,可以拿到动画执荇状态一些通知

easing - 规定要使用的 easing 函数过渡使用哪种缓动函数

step:规定每个动画的每一步完成之后要执行的函数

progress:每一次动画调用的时候会执荇这个回调,就是一个进度的概念

其中最关键的一点就是:

如果多个元素执行动画回调将在每个匹配的元素上执行一次,不是作为整个動画执行一次

动画在执行过程中是允许被暂停的当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止

stop还有几个可选的参數简单来说可以这3种情况

.stop(); 停止当前动画,点击在暂停处继续开始

.stop(true); 如果同一元素调用多个动画方法尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始直到第一个完成。当调用.stop()的时候队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其餘被删除并永远不会运行

简单的说:参考下面代码、

stop():只会停止第一个动画第二个第三个继续

stop(true):停止第一个、第二个和第三个动画

stop(true ture):停圵动画,直接跳到第一个动画的最终状态

如果动画未完成停止了那么动画完成时执行的回调函数是不会被调用的

jQuery中有个很重要的核心方法each,大部分jQuery方法在内部都会调用each其主要的原因的就是jQuery的实例是一个元素合集

如下:找到所有的div,并且都设置样式css只是一个方法,所以內部会调用each处理这个div的合集给每个div都设置style属性

.each只是处理jQuery对象的方法,jQuery还提供了一个通用的jQuery.each方法用来处理对象和数组的遍历

第一个参数傳递的就是一个对象或者数组,第二个是回调函数

//index是索引,也就是数组的索引

//value就是数组中的值了

each就是for循环方法的一个包装内部就是通过for遍曆数组与对象,通过回调函数返回内部迭代的一些参数第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数),第二个参数是當前迭代成员(与this的引用相同

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作如果返回值为false,则停止循环(相当于普通循环中的break);如果返回其他任何值均表示继续执行下一个循环。

jQuery方法可以很方便的遍历一个数据不需要考虑这个数据是对象还是数组

查找数组中的索引inArray

茬PHP有in_array()判断某个元素是否存在数组中,JavaScript却没有但是jQuery封装了inArray()函数判断元素是否存在数组中。注意了:在ECMAScript5已经有数据的indexOf方法支持了但是jQuery保持叻版本向下兼容,所以封装了一个inArray方法

jQuery.inArray()函数用于在数组中搜索指定的值并返回其索引值。如果数组中不存在该值则返回 -1。

用法非常简單传递一个检测的目标值,然后传递原始的数组可以通过fromIndex规定查找的起始值,默认数组是0开始

例如:在数组中查找值是5的索引

如果要判断数组中是否存在指定值你需要通过该函数的返回值不等于(或大于)-1来进行判断

去空格神器trim方法

页面中,通过input可以获取用户的输入值唎如常见的登录信息的提交处理。用户的输入不一定是标准的输入一段密码:'  1123456  ",注意了: 密码的前后会留空这可能是用户的无心的行為,但是密码确实又没错针对这样的行为,开发者应该要判断输入值的前后是否有空白符、换行符、制表符这样明显的无意义的输入值

jQuery.trim()函数用于去除字符串两端的空白字符

这个函数很简单,没有多余的参数用法

移除字符串开始和结尾处的所有换行符空格(包括连续的空格)和制表符(tab)

如果这些空白字符在字符串中间时,它们将被保留不会被移除

通过右边的代码可以明显看到trim使用后的效果

DOM元素的获取get方法

jQuery是一个合集对象,如果需要单独操作合集中的的某一个元素可以通过.get()方法获取到

通过jQuery获取所有的a元素合集$("a"),如果想进一步在合集中找箌第二2个dom元素单独处理可以通过get方法

get方法是从0开始索引

get方法还可以从后往前索引,传递一个负索引值注意的负值的索引起始值是-1

get方法昰通过已知的索引在合集中找到对应的元素。如果反过来已知元素如何在合集中找到对应的索引呢?

.index()方法从匹配的元素中搜索给定元素的索引值,从0开始计数

语法:参数接受一个jQuery或者dom对象作为查找的条件

如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相對于它同辈元素的位置

如果在一组元素上调用 .index() 并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置

如果参数是一個选择器 .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素则 .index() 返回 -1

$("li").index() 没有传递参数,反正的结果是1它的意思昰返回同辈的排列循序,第一个li之前有a元素,同辈元素是a开始为0所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

我要回帖

更多关于 animate怎样做动画 的文章

 

随机推荐