jQuery(动画篇)

作者: yinxmm | 来源:发表于2018-09-13 12:37 被阅读0次

四、动画篇

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