1.隐藏元素的hide方法,.hide(options),当提供hide方法的参数时,.hide成为一个动画方法,将匹配元素的高度,宽度,以及透明度,同时进行动画操作。有快捷参数.hide(fast/slow),分别代表着200和600毫秒的延时!注意!jQuery在使用hide时,是会保持本身元素的原始属性值的,在之后通过对应的方法还原的时候还是初始值!css中类似的方法有display:none
2.显示元素show方法
$('elem').hide(3000).show(3000)
让元素执行3秒的隐藏动画,然后执行3秒的显示动画。show和hide修改是display属性,通过是visibility属性布局需要通过Css方法单独设置
3.toggle方法:用于切换显示或隐藏匹配元素。没有参数toggle(),没有动画。提供参数,提供了时间,还有动画的回调。该方法其实就是hide和show的相互切换
4.下拉动画slideDown:常用操作
.slowDown([duration],[,complete])
具体使用:
$("ele").slowDown(1000,function(){ //等待动画执行一秒后,执行别的动作 });
在使用该方法前,元素是先隐藏起来的,可以设置display:none
5.上卷动画slideUp:最简单的使用就是不带参数
$("elem").slideUp();
含义:找到元素的高度,然后采用一个下滑动画让元素一直滑到隐藏,修改元素display样式属性为none,这样就可以确保这个元素不会影响页面布局了
带参数的用法
.slideUp([duration][,easing][,complete])
注意:因为动画是异步的,所以在动画执行之后执行某些操作就必须写到回调函数里面
6.上卷下拉切换slideToggle:当隐藏一个动画之后,可以设置display样式为none,以确保该元素不再影响页面布局
7.淡出动画fadeOut:用于隐藏所有匹配的元素,并带有淡出的过渡动画效果
.fadeOut([duration][,complete])
淡入动画fadeIn其用法和上面的类似
淡入淡出切换fadeToggle:如果当前元素是可见的吗,则将其隐藏(淡出);如果元素当前是隐藏的,则将其显示(淡入)
8.淡入效果fadeTo:可以设置opacity的值,语法如下
.fadeTo(duration,opacity,[,complete])
9.animate方法:语法如下
.animate(properties[,duration][,easing][,complete]) .animate(properties,options)
该方法允许我们在任意数值的css属性上创建动画。参数分析:properties:一个或者多个css属性的键对所构成的object对象。要特别注意所有用于动画的属性必须是数字的,除非有特别说明。还有注意党委属性值的单位像素是PX。
10.停止动画stop()
11.each()方法:jQuery的大部分方法都是针对元素合集的操作 ,所以jQuery会提供$(selector).each()来遍历jQuery对象
.each只是处理jQuery对象的方法,jQuery还提供了一个通用的jQuery.each()方法用来处理对象和数组的遍历,语法如下
jQuery.each(array,callback) jQuery.each(object,callback)
第一个参数传递的就是一个对象或者数组,第二个是回调函数
each就是for循环方法的一个包装,内部就是通过for遍历数组与对象
jQuery.each()函数还会根据每次调用callback的返回值来决定后续动作,如果返回值为false,则停止循环
$.each(["Aaron","慕课"],function(index,value)){ return false;//停止迭代 }
12.查找数组中的索引inArray:判断元素是否存在数组中,返回索引值,如果不存在該值,则返回-1。语法如下:
jQuery.inArray(value,array[,fromIndex])
13.去空格神器trim方法:用于去除字符串两端的空白字符,需要注意的是,如果这些空白符是在字符串的中间时,它们会被保留,不会被移除
14.jQuery是一个合集对象,如果需要单独操作合集中的某一个元素,可以通过.get()方法获取到,也可以获得某个。语法:
.get([index])
jQuery动画基础篇
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...