ECMAScriptjQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery吃隐藏元素的hide方法

 

吃页面及之要素不可见,一般可以由此安装css的display为none属性。但是经过css直接修改是静态的布局,如果在代码执行的下,一般是由此js控制元素的style属性,这里jQuery提供了一个飞速的方法.hide()来上这功效

 

$elem.hide()

 

供参数:

 

.hide( options
) 当提供hide方法一个参数时,.hide()就会见化为一个卡通方法。.hide()方法将会配合配元素的小幅,高度,以及未透明度,同时进行动画操作

 

 $(“button:last”).click(function() {

            $(“#a2”).hide({

                duration: 3000,

 

            })

        });

 

2.jQuery遇显元素的show方法

 

hide是深受要素显示到隐藏,show则是倒转,让要素于影到亮

 


show与hide方法是改的display属性,通过是visibility属性布局要经过css方法单独设置

– 如果采取!important在你的体中,比如display: none
!important,如果你希望.show()方法正常办事,必须使用.css(‘display’,
‘block !important’)重写样式


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

 

3.jQuery备受展示与隐藏切换toggle方法

 

主干的操作:toggle();

 

眼看是极核心的操作,处理元素显示或者藏,因为无带参数,所以没有动画。通过改动CSS的display属性,匹配的素用于立亮或隐匿,没有动画。

 

– 如果元素是初期显示,它会为隐形

– 如果隐藏的,它会展示出来

 

display属性将给贮存并且要的上可还原。如果一个元素的display值为inline,然后是隐形和出示,这个因素将再展示inline

 

提供参数:.toggle( [duration ] [, complete ] )

 

一律的提供了时光、还有动画结束之回调。在参数对应的时空外,元素会生出显示/隐藏的改动,在改变之进程遭到见面把元素的高、宽、不透明度进行相同文山会海动画效果。这个元素其实就算是show与hide的方

 

 $(“button:last”).click(function() {

        $(“.right”).toggle(3000)

    });

 

4.jQuery遭受生带动画slideDown

 

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

 

.slideDown()方法以于匹配元素的莫大的卡通片,这会造成页面的底下有滑行下来,弥补了展示的办法

 

广泛的操作,提供一个卡通是时,然后传递一个回调,用于知道动画是啊时候结束

 

.slideDown( [duration ] [, complete ] )

 

持续时间(duration)是因毫秒为单位的,数值越充分,动画越慢,不是进一步快。字符串
‘fast’ 和 ‘slow’
分别表示200同600毫秒的延时。如果提供其他其他字符串,或者是duration参数为简单,那么默认使用400
毫秒的延时。

 

实际以:

 

$(“ele”).slideDown(1000, function() {
    //等待动画执行1秒后,执行别的动作….
});

 

注意事项:

 


下拉动画是起无到有,所以一律开始元素是亟需先躲起来的,可以装display:none

– 如
果提供回调函数参数,callback会在动画就的时候调用。将不同之卡通串联在并以顺序排列执行是甚有效之。这个回调函数不设置任何参数,但是
this会设成将要执行动画的雅DOM元素,如果多单要素并做动画效果,那么要非常注意,回调函数会以各一个因素执行完动画后都尽同一不成,而休是马上组
动画整体才行同一差

 

 

 $(“button:last”).click(function() {

            $(“#a2”).slideDown(3000,function(){

                alert(‘动画执行完毕’)

            })

        });

 

5.jQuery中及卷动画slideUp

 

尽简易的行使:不带来参数

 

$(“elem”).slideUp();

 

此以的意义就是是:找到元素的冲天,然后采用一个落动画让要素一直滑到隐藏,当高度为0的时段,也尽管是不可见的常,修改元素display
样式属性让安装为none。这样即便能确保这个因素不见面潜移默化页面布局了

 

带参数:

 

.slideUp( [duration ] [, easing ] [, complete ] )

 

一致可以提供一个时,然后可以采取同一栽过渡使用啊种缓动函数,jQuery默认就2种,可以经下载插件支持。最后一个动画片结束的回调方法。

 

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

 

  $(“button:last”).click(function() {

            $(“#a2”).slideUp(3000,function(){

                alert(‘动画执行了’)

            })

        });

 

6.jQuery中上卷下拉切换slideToggle

 

jQuery提供了一个便利措施slideToggle用滑动动画显示或躲藏一个匹配元素

 

核心的操作:slideToggle();

 

就是不过核心的操作,获取元素的高度,使这个因素的莫大来改变,从而为要素里之始末为生要于上滑动。

 

供参数:.slideToggle( [duration ] ,[ complete ] )

 

同的供了时光、还有动画结束之回调。在参数对应的日子内,元素会就动画,然后起身回调函数

 

还要也提供了光阴的快捷定义,字符串 ‘fast’ 和 ‘slow’
分别表示200跟600毫秒的延时

 

注意:

 


display属性值保存在jQuery的数码缓存中,所以display可以方便以后得还原至那初始值

– 当一个潜藏动画后,高度值达到0的下,display
样式属性让装置为none,以管该因素不再影响页面布局

 

   $(“button”).click(function() {

            $(“#a1”).slideToggle(3000)

        });

 

 

7.jQuery中没落出动画fadeOut

 

安元素透明度为0,可以吃要素不可见,透明度的参数是0~1之间的价,通过变更者价好叫要素来一个透明度的作用。常见的淡入淡出动画正是如此的原理。

 

fadeOut()函数用于隐藏所有匹配的要素,并含淡出的对接动画效果

 

所谓”淡出”隐藏的,元素是暗藏状态不对准发任何变更,元素是可见的,则用那藏。

 

.fadeOut( [duration ], [ complete ] )

 

经过不透明度的生成来贯彻有匹配元素的淡出功能,并于动画就后而选地触发一个回调函数。这个动画就调整元素的非透明度,也就是说有匹配的元素的莫大与幅度不会见发生变化。

 

字符串 ‘fast’ 和 ‘slow’
分别表示200及600毫秒的延时。如果提供其他其它字符串,或者这个duration参数为概括,那么默认使用400毫秒的延时

 

 $(“p”).fadeOut();

 

 $(“p”).fadeOut({

                duration: 1000

            });

 $(“p”).fadeOut(2000, function() {

                alert(“隐藏了!”);

            });

 

8.jQuery被淡入动画fadeIn

 

fadeOut是退出效果,相反的还有淡入效果fadeIn,方法应用上双方都是均等的,只是结果相反

 

.fadeIn( [duration ], [ complete ] )

 


duration:指定过渡动画运行多长时间(毫秒数),默认值为400。该参数为可吗字符串”fast”(=200)或”slow”(=600)。

– 元素显示了后用实施之函数。函数内的this指向当前DOM元素。

 

fadeIn()函数用于展示所有匹配的因素,并含淡入的连动画效果。

 

注意:

 

– 淡入的卡通片原理:操作元素的未透明度从0%逐年增加至100%

– 如果元素本身是可见的,不对准那发其它变动。如果元素是逃匿的,则使该可见

 

9.jQuery遭受淡入淡出切换fadeToggle

 

fadeToggle()函数用于切换所有匹配的因素,并带有淡入/淡出的接动画效果。之前为仿照了toggle、slideToggle
也是看似的处理方式

 

fadeToggle切换fadeOut与fadeIn效果,所谓”切换”,即如果元素即凡是可见的,则拿其隐身(淡出);如果元素即是躲的,则要该出示(淡入)。

 

常用语法:.fadeToggle( [duration ] ,[ complete ] )

 

只是选取的 duration 参数规定职能的时长。它好取以下值:”slow”、”fast”
或毫秒。 可挑选的 callback 参数是 fadeToggle完成后所执之函数名称。

 

fadeToggle() 方法可当 fadeIn() 与 fadeOut()
方法中开展切换。如果元素都退出,则 fadeToggle()
会向元素添加淡入效果。如果元素都淡入,则 fadeToggle()
会向元素添加淡出效果。

(和方的方式一样)

 

10.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 参数是欠函数完成后所推行之函数名称。

 

$(“p”).fadeTo(“slow”, 0.5);

 

$(“p”).fadeTo(1000, 0.2);

      

$(“p”).fadeTo(1000, 0.9, function() {

 alert(‘完成’)

});

 

11.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() 会使用离效果亮她。

– 注释:隐藏的素不见面吃全然亮(不再影响页面的布局)

 

12.jQuery中动画animate(上)

 

微复杂的动画片通过之前学到的几乎独卡通函数是不可知实现,这时候就用强的animate方法了

 

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

 

语法:

.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回调

 

动画片就时实行的函数,这个可确保当前卡通确定完成后发会触发

 

 if (v == “1”) {

            // 数值的单位默认是px

            $aaron.animate({

                width  :300,

                height :300

            });

        } else if (v == “2”) {

            // 在存活高度的底子及加码100px

            $aaron.animate({

                 width  : “+=100px”,

                 height : “+=100px”

            });

        } else if (v == “3”) {

            $aaron.animate({

                fontSize: “5em”

            }, 2000, function() {

                alert(“动画 fontSize执行完毕!”);

            });

        } else if (v == “4”) {

            //通过toggle参数切换高度

            $aaron.animate({

                width: “toggle”

            });

        }

 

13.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(‘<div>Animation complete.</div>’);
    }
  });

 

14.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):停止动画,直接跨越到第一个卡通的末尾状态

 

15.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方法好挺便利的遍历一个数目,不需考虑这个数额是目标或数组

 

 // 周历数组元素

            $.each([‘Aaron’, ‘慕课网’], function(i, item) {

                $aaron.append(“索引=” + i + “; 元素=” + item);

            });

 

  $.each({

                name: “张三”,

                age: 18

   }, function(property, value) {

                $aaron.append(“属性名=” + property + “; 属性值=” +
value);

   });

 

16.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来展开判断

 

 if (v == “1”) {

 

            var index = $.inArray(‘Aaron’,[‘test’,’Aaron’,
‘array’,’慕课网’]);

 

            $aaron.text(‘Aaron的目录是: ‘+ index)

 

        } else if (v == “2”) {

 

            //指定索引开始的职

            var index =
$.inArray(‘a’,[‘a’,’b’,’c’,’d’,’a’,’c’],2);

 

            $aaron.text(‘a的目录是: ‘+ index)

        }

 

17.jQuery遭遇失空格神器trim方法

 

页面中,通过input可以得到用户的输入值,例如常见的登录信息的付出处理。用户之输入不自然是正经的,输入一段密码:’
 1123456  “,注意了:
密码的前后会留下空,这或是用户之无意识之行,但是密码确实又尚未错,针对如此的行为,开发者应该使看清输入值的内外是否发生空白符、换行符、制表符这样举世瞩目的空洞的输入值。

 

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

 

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

 

要小心:

 


变除了字符串开始和结尾处的兼具换行符,空格(包括连接的空格)和制表符(tab)**

– 如果这些空白字符在字符串中间不时,它们以于封存,不会见受移除

 

 alert(“值的长:” + $.trim($(“#results2”).val()).length)

 

18.jQuery遭DOM元素的获取get方法

 

jQuery是一个合集对象,如果需要独自操作合集中之之某一个因素,可以经.get()方法得到到

 

以下有3独a元素结构:

 

<a>1</a>
<a>2</a>
<a>3</a>

 

经过jQuery获取具有的a元素合集$(“a”),如果想越在齐集中找到第二2单dom元素单独处理,可以经get方法

 

语法:

 

.get( [index ] )

 

注意2点

 


get方法是获取的dom对象,也便是通过document.getElementById获取的目标**

– get方法是从0开始索引

 

用亚只a元素的追寻: $(a).get(1)

 

负索引值参数

 

get方法还好于晚朝着前面索引,传递一个负索引值,注意的负值的搜引起始值是-1

 

同一是找到第二元素,可以传递 $(a).get(-2)

 

$aaron.get(1).style.color = “blue”

 $aaron.get(-1).style.color = “#8A2BE2”

 

19.jQuery受到DOM元素的得到index方法

 

get方法是透过就解的目录于一块儿集中找到相应之元素。如果反过来,已知元素如何当并集中找到呼应的目录呢?

 

.index()方法,从匹配的素中寻找于定元素的索引值,从0开始计数。

 

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

 

.index()
.index( selector )
.index( element )

 

– 如果无传递任何参数为 .index()
方法,则赶回值就是是jQuery对象吃首先只因素相对于其同辈元素的岗位

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

– 如果参数是一个选择器, .index()
返回值就是本元素相对于选器匹配元素的位置。如果找不顶相当的元素,则
.index() 返回 -1

 

简短来说:

 

<ul>
    <a></a>
    <li id=”test1″>1</li>
    <li id=”test2″>2</li>
    <li id=”test3″>3</li>
</ul>

 

$(“li”).index()
没有传递参数,反正的结果是1,它的意是归同辈的排循序,第一个li之前发生a元素,同辈元素是a开始为0,所以li的启索引是1

 

假设一旦高速找到第二只li在列表中的目录,可以通过如下2种方式处理

 

$(“li”).index(document.getElementById(“test2”)) //结果:1
$(“li”).index($(“#test2”))  //结果:1