四、动画篇
1. 动画基础隐藏和显示
(1) jQuery中隐藏元素的hide方法
过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
语法：$(selector).hide(speed,callback);
可选的
speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的callback 参数是隐藏或显示完成后所执行的函数名称。
(2) jQuery中显示元素的show方法
(3) jQuery中显示与隐藏切换toggle方法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
语法：$(selector).toggle(speed,callback,switch)
speed:
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。
可能的值：
- 毫秒 （比如 1500）
- "slow"
- "normal"
- "fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
如果设置此参数，则无法使用 switch 参数。
callback:
可选。toggle 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。
switch:
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
True - 显示所有元素
False - 隐藏所有元素
如果设置此参数，则无法使用 speed 和 callback 参数。
2. 上卷下拉效果
(1) jQuery中下拉动画slideDown
通过调整高度来滑动显示被选元素
slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
语法：$(selector).slideDown(speed,callback)
speed:
可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
callback:
可选。slideDown 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
(2) jQuery中上卷动画slideUp
通过调整高度来滑动隐藏被选元素
通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
语法：$(selector).slideUp(speed,callback)
(3) jQuery中上卷下拉切换slideToggle
slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
语法：$(selector).slideToggle(speed,callback)
- display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值
- 当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局
3. 淡入淡出效果
(1) 淡出动画fadeOut
设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。
fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果。
语法：$(selector).fadeOut(speed,callback);
可选的
speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的callback 参数是 fading 完成后所执行的函数名称。
(2) 淡入动画fadeIn
- 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%
- 如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见
fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果。
语法：$(selector).fadeIn(speed,callback);
(3) 淡入淡出切换fadeToggle
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
语法：$(selector).fadeToggle(speed,callback);
(4) 淡入效果fadeTo
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：$(selector).fadeTo(speed,opacity,callback);
4.动画切换比较
jQuery中toggle与slideToggle以及fadeToggle的比较
操作元素的显示和隐藏可以有几种方法：
- 改变样式display为none
- 设置位置高度为0
- 设置透明度为0
toggle与slideToggle细节区别：
- toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
- slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性
5. 自定义动画
(1) 动画animate
animate() 方法用于创建自定义动画。
语法：.animate( properties ,[ duration ], [ easing ], [ complete ] )
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() - 使用预定义的值
以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
duration时间:可以取以下值："slow"、"fast" 或毫秒。
easing动画运动的算法:jQuery库中默认调用 swing
complete回调:动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发。
(2) 停止动画stop
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
语法：$(selector).stop(stopAll,goToEnd);
可选的
stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
- .stop(); 停止当前动画，点击在暂停处继续开始
- .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果stopAll 参数提供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)：停止动画，直接跳到第一个动画的最终状态
6. jQuery核心
(1) each方法的应用
$(selector).each()来遍历jQuery对象。
$(selector).each(function(index,element))
each() 方法规定为每个匹配元素规定运行的函数。
index - 选择器的 index 位置
element - 当前的元素（也可使用 "this" 选择器）
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
处理对象和数组的遍历
jQuery.each(array, callback )
jQuery.each( object, callback )
$.each(["Aaron", "慕课网"], function(index, value) {
//index是索引,也就是数组的索引
//value就是数组中的值了
});
$.each({
name: "张三",
age: 18
}, function(property, value) {
$aaron.append("属性名=" + property + "; 属性值=" + value);
});
- each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同
- jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。
(2) 查找数组中的索引inArray
jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
语法：jQuery.inArray( value, array ,[ fromIndex ] )
(3) 去空格神器trim方法
jQuery.trim()函数用于去除字符串两端的空白字符
- 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
- 如果这些空白字符在字符串中间时，它们将被保留，不会被移除
(4) DOM元素的获取get方法
.get( [index ] )
- get方法是获取的dom对象，也就是通过document.getElementById获取的对象
- get方法是从0开始索引
负索引值参数
get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1
<a>1</a>
<a>2</a>
<a>3</a>
$(a).get(1)//第二个a元素
$(a).get(-2)//第二个a元素
(5) DOM元素的获取index方法
.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。
语法：参数接受一个jQuery或者dom对象作为查找的条件
.index()
.index( selector )
.index( element )
- 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
- 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
- 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1
网友评论