Jquery之动画（四）

Jquery动画篇
一、动画的隐藏和显现

1、hide（）方法，隐藏

.hide(参数)：

快捷参数：
.hide(“fast/slow”)
这是一个动画设置的快捷方式，‘fast’和’slow’分别代表200和600毫秒的延时，就是元素会执行200、600毫秒的动画在隐藏；
注意：
jQuery在做hide操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。一旦透明度 达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局。
2、show（）：显现元素
css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示

注意：

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

如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

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

3、toggle()方法：显示与隐藏切换

A、不带参数的toggle（）方法
这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
如果元素是最初显示，它会被隐藏
如果隐藏的，它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline
B、带参数的.toggle([duration][,complete])
同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法.
C、.toggle(display):直接定位操作
直接提供一个参数，指定要改变的元素的最终效果。其实就是确定是使用show还是hide方法
原理：

二、上卷下拉效果
1、slideDown()方法：下拉动画
.slideDown():用滑动动画显示一个匹配元素
.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
语法：

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

注意：

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

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

 

2、slideUp（）：上卷动画，从有到无，show----》hide

A、不带参数

B、带参数

3、slideToggle()：上卷下拉效果
A、无参数
这是最基本的操作，获取元素的高度，使这个元素的高度发生改变，从而让元素里的内容往下或往上滑。
B、有参数  .slideToggle([duration],[complete])
提供了时间，还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后触发回调函数，同时也提提供了事件的快速定义，字符串‘fast‘和’slow‘分别代表200和600毫秒的延时。如：slideToggle（“fast“）或  slideToggle（”slow“）
注意：
display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局

三、淡入淡出效果
1、fadeOut(),淡出动画：从有到无，透明度由1到0的变化；该函数用于隐藏所有匹配的元素，并带有淡出的动画效果。
语法：

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400毫秒的延时
2、fadeIn（），淡入效果，从无到有，透明度由0到1 的 变化；该函数用于显示所有匹配的元素，并带有淡入的动画效果。
语法：.fadeIn([duration],[complete])
duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
3、fadeToggle（），淡入淡出切换的效果。
fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。
语法：.fadeToggle([duration],[complete])
4、fadeTo（），淡入效果
引入原因：fadeOut的透明度必须是从1到0，fadeIn的透明度必须是从0到1；
如果想让元素保持动画效果，执行opacity=0.5，要使用fadeTo（）方法；
语法：.fadeTo(duration,opacity,callback)
必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

不使用Jquery的实现：
如果不考虑CSS3，我们用JS实现的话，基本就是通过定时器，在设定的时间内一点点的修改opacity的值，最终为0.5

总结：toggle，slideToggle，fadeToggle的比较
1、toggle，slideToggle，fadeToggle的区别：
toggle：切换显示与隐藏效果  ，动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性 。        
sildeToggle：切换上下拉卷滚效果，动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性
fadeToggle：切换淡入淡出效果，a、fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。b、元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。c、元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。d、注释：隐藏的元素不会被完全显示（不再影响页面的布局）

四、自定义动画
1、animate():用来实现复杂的动画
语法：.animate(properties,[duration],[easing],[complete]);
.animate(properties,options)：animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的这个语法，传递一个对象参数，可以拿到动画执行状态一些通知
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 和 %需要指定使用
除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
例子：

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

Duration参数：
动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。
Easing参数：
动画运动的算法，Jquery库中默认调用Swing；
Complete参数：
动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发
Options参数：

注意：
如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次
常用的方法：
$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
2、stop（）暂停动画

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

语法：

.stop( [clearQueue ], [ jumpToEnd ] )

.stop( [queue ], [ clearQueue ] ,[jumpToEnd ] )

 

参数的三种情况：

.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核心

1、each（）

Jquery的实例是一个元素集合，所有each（）方法是会常常使用的。Jquery的大部分方法都是针对元素集合的操作，所以Jquery会提供$(selecotor).each()方法来遍历Jquery对象。

三种方法：

.each()：只是处理Jquery对象的方法。

Jquery.each(array,callback):针对数组的遍历。

Jquery.each(object,callback):针对对象的遍历。

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

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

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

2、inArray（）函数，查找数组中的索引
该函数用来判断元素是否存在数组中。在数组中搜索指定的值，并返回其索引值，如果数组不存在该值，则返回-1；
语法：Jquery.inArray(value,array,[fromIndex]);
用法：
$().inArray(5,[1,2,3,4,5,6,7])//返回索引4
注意：如果要判断数组中是否存在指定值，你需要通过该函数的返回不等于（或大于）-1来进行判断。

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


Jquery.tirm()函数用于去除字符串两端的空白字符串。该函数没有多余的参数用法。
注意：
移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
如果这些空白字符在字符串中间时，它们将被保留，不会被移除

4、get（）方法：Jquery中dom元素的获取
Jquery是一个集合对象，如果需要单独操作集合中的某一元素，可以通过.get()方法获取。
例子：
<a>1</a>
<a>2</a>
<a>3</a>
注意：
1、get方法是获取的dom对象，也就是通过document.getElementById获取的对象。

2、get方法是从0开始索引
3、get方法可以使用负索引值，负值的索引起始值是-1，注意从后往前索引，如果是$(“a”).get(-1)得到的是第三个a。

5、index（）方法
get（）方法是通过索引找到对于的元素，而index（）是通过元素找到其在对应集合中的 索引。
使用方法：
.index();;;;;.index(selector);;;;;;;.index(element);;;;


A、如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
B、如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
C、如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1。