首先给大家介绍jquery data()函数
jQuery中data()函数用于向被选元素附加数据,或者从被选元素获取数据。通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在。
一、jquery data()的作用
data() 方法向被选元素附加数据,或者从被选元素获取数据。 通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在。 该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据,请使用 removeData() 函数。
二、jquery data的使用方式
1、获取附加的data的值
$(selector).data(name)
参数说明
name:
可选。规定要取回的数据的名称。
如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。
2、用name和value为对象附加数据
$(selector).data(name,value)
参数说明
selector:为需要附加或者获取数据的对象。 name:参数为数据的名称。 value:参数为数据的值。
3、使用对象向元素附加数据
使用带有名称/值对的对象向被选元素添加数据。 除了以提供 name 和 value 的方式进行赋值,我们还可以直接传入另一个对象( “another” )作为参数。这种情况下,“another” 的属性名称和属性值将被视为多个键值对,从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。
$(selector).data(object)
参数说明
object:必需。规定包含名称/值对的对象。
实例
实例说明
1、点击按钮(stop()),由于两个参数都是false。所以点击发生时,animater没有跳到当前动画(动画1)的最终效果,而直接进入动画2,然后动画3,4,5.直至完成整个动画。
2、点击按钮(stop(true)),由于第一个是true,第二个是false,所以animater立刻全部停止了,动画不动了。
3、点击按钮(stop(false,true)),由于第一个是false,第二个是true,所以点击发生时,animater身处的当前动画(动画1)停止并且animater直接跳到当前动画(动画1)的最终末尾效果位置,接着正常执行下面的动画(动画2,3,4,5),直至完成整个动画。
3、点击按钮(stop(true,true)),由于两个都是true,所以点击发生时,animater跳到当前动画(动画1)的最终末尾效果位置,然后,全部动画停止。
三、jquery stop()在工作中的应用
一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏 ,如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。
在写动画效果的代码前加入stop(true,true),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,完成当前的动画(跳至当前动画的最终效果位置)。
最后给大家介绍jquery delay()
jquery中delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:$(selector).delay(duration)其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执 ,delay与setTimeout函数还是有区别的,delay是更适合某些使用情况。
可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间,从而在上一个动画效果执行后延迟下一个动画效果的执行时间。
一、语法
$(selector).delay(speed,queueName)
1、参数说明
2、备注
延时时间(duration参数)是以毫秒为单位的,数值越大,动画越慢,不是越快。 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
二、delay()实例
HTML
动画效果:
实例二、让页面中的按钮在页面加载后500毫秒隐藏,然后再过1500毫秒显示出来
三、jquery中使用delay()注意事项
1、delay适用在jQuery动画效果和类似队列中 2、如果下一项是动画效果,则会执行延迟调用 3、如果不是效果动画,则它不会被加入效果队列中,因此该函数不会对它进行延迟调用。 4、如果要将不是动画效果加入延迟,则需要将它加入到queue队列中去。
例如
备注:上面方法只隐藏,不会再显示,queue执行完后,也中止了动画队列的继续执行,需要调用dequeue使其执行下去
又如
备注:上面方法也是只隐藏,而不会再显示!这里show不再指定显示动画时长,则show方法不再是一个动画。由此可知,dequeue只能使得动画队列中的后续方法执行下去,不能使非动画队列中的jquery方法继续执行!