jQuery整理笔记六----jQuery动画

本是古典何须时尚 2022-08-27 10:54 189阅读 0赞

1、最简单的动画：显隐效果

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。

具体说明如下：

visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。

display   隐藏后，隐藏的元素不再占用文档的位置。

注：这块比较巧，这个样式属性正好帮了我一个忙，事情是这样的：

![Center][]

在这个页面中有设备类型的列表框和抓包网口的多选框，要求选择设备类型选择千兆的时候显示4个抓包网口，选择万兆的时候隐藏掉eth3和eth4两个网口。

我当时第一做法就是把eth3和eth4用span元素包裹，然后选择万兆的时候触发事件让span执行hide()方法。这样就把后两个网口隐藏了，但是有一个问题，当hide()后，页面结

构变乱了，测试部又说不能用disabled="disabled"只读属性代替，正想找个时间让美工帮调一下。晚上看会书就看到了visibility 这个样式属性，正好就用上了。

在jQuery中定义了show()和hide()两种方法进行元素的索引。其实这俩方法内部就是对元素的display样式进行操作。

show()和hide()方法还可以设置参数，第一个参数代表(隐藏)的速度,参数值越小越快(可以是具体的值，如1000代表1000ms,也可以是预定义的字符串：slow、normal、st，分

别代表600 400 和200)，第二个参数也是一个可选参数,表示在动画演示完毕要调用的回调函数。

示例：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** show和hide **</****title****>**  
5.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.    **<****script** type="text/javascript"**>**  
7.    <!--  
8.          $(function()\{  
9.              var t=false;  
10.             $("input").click(function()\{  
11.                 if(t)\{  
12.                     $("div").show(1000,function()\{  
13.                         $("input").val('隐藏元素');  
14.                     \})  
15.                     t=false;  
16.                 \}  
17.                 else\{  
18.                     $("div").hide(1000,function()\{  
19.                         $("input").val('显示元素');  
20.                     \})  
21.                     t=true;  
22.                 \}  
23.             \})  
24.         \})  
25.   //--**>**  
26.   **</****script****>**  
27.  **</****head****>**  
28.  **<****body** **>**  
29.     **<****input** type="button" value="隐藏元素" **>**  
30.     **<****div** id="" class=""**>****<****h1****>**div元素**</****h1****>****</****div****>**  
31.  **</****body****>**  
32. **</****html****>****</****span****>**

再看个不带回调函数的：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

2、淡入淡出

fadeIn()和fadeOut()方法，这两个方法是在一定时间内改变元素的不透明度，直到元素完全消失(或者出现)，语法与show()和hide()相同。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

3、伸缩

slideUp()和slideDown()方法  用法与上两组函数相同

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

4、自定义动画方法

animate(params,speed,callback)

参数说明：

params：一个包含样式属性及值的映射

sleep：速度参数，可选

callback：在动画完成时执行的函数

(1)、一个最简单的自定义动画

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

注意：为了使这个元素动起来，要更改元素的left属性。需要注意的是要使用animate()方法之前，为了能影响元素的'left' 'right' 'top'  'bottom'样式属性，必须先把元素的position

属性设置成'relative'或者'sbsolude'。

(2)、累加累减动画

上个例子当中,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:"500px"改成left:"+=500px"或者left:"-=500px"即可。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**$(function()\{  
2.      $("\#panel").click(function()\{  
3.         $(this).animate(\{left: "+=500px"\}, 3000);  
4.      \})  
5.  \})**</****span****>**

(3)、多重动画

A、同时执行多个动画

上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**$(function()\{  
2.      $("\#panel").click(function()\{  
3.         $(this).animate(\{left: "500px",height:"200px"\}, 3000);  
4.      \})  
5.  \})**</****span****>**

B、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**$(function()\{  
2.      $("\#panel").click(function()\{  
3.         $(this).animate(\{left: "500px"\},3000)  
4.                .animate(\{height:"200px"\},1000);  
5.      \})  
6.  \})**</****span****>**

(4)、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这

些效果后让它以淡出的方式隐藏掉。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**$(function()\{  
2.      $("\#panel").css("opacity",0.5);//设置不透明度  
3.      $("\#panel").click(function()\{  
4.         $(this).animate(\{left: "400px",height:"200px",opacity:"1"\},3000)  
5.                .animate(\{top:"200px",width:"200px"\},3000)  
6.                .fadeOut(1000);  
7.      \})  
8.  \})**</****span****>**

(5)、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**$(function()\{  
2.      $("\#panel").css("opacity",0.5);//设置不透明度  
3.      $("\#panel").click(function()\{  
4.         $(this).animate(\{left: "400px",height:"200px",opacity:"1"\},3000)  
5.                .animate(\{top:"200px",width:"200px"\},3000,function()\{$(this).css("border","5px solid blue")\});  
6.                  
7.      \})  
8.  \})**</****span****>**

这样就把css方法加入到动画队列中了。

5、停止动画和判断是否处于动画状态

(1)、停止元素的动画

stop(\[clearQueue\]\[,gotoEnd\])  两个都是可选参数，都是boolean类型

参数说明：

clearQueue：代表是否清空未执行完的动画队列

gotoEnd     ：代表是否将正在执行的动画跳到末状态

通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"**>**  
2.  **<****html** xmlns="http://www.w3.org/1999/xhtml"**>**  
3.  **<****head****>**  
4.  **<****meta** http-equiv="Content-Type" content="text/html; charset=utf-8" **/>**  
5.  **<****title****>**Panel**</****title****>**  
6.  **<****style** type="text/css"**>**  
7.  \*\{margin:0;padding:0;\}    
8.  body \{ font-size: 13px; line-height: 130%; padding: 60px \}  
9.  \#panel \{ width: 60px; border: 1px solid \#0050D0 ;height:22px;overflow:hidden;\}  
10. .head \{ padding: 5px; background: \#96E555; cursor: pointer;width: 300px;\}  
11. .content \{ padding: 10px; text-indent: 2em; border-top: 1px solid \#0050D0;display:block; width:280px;\}  
12. **</****style****>**  
13. **<****script** src="../../../scripts/jquery.js" type="text/javascript"**>****</****script****>**  
14. **<****script** type="text/javascript"**>**  
15. $(function()\{  
16.       $("button:eq(0)").click(function () \{  
17.           $("\#panel")  
18.             .animate(\{height : "150" \} , 2000 )  
19.             .animate(\{width : "300" \} , 2000 )  
20.             .hide(3000)  
21.             .animate(\{height : "show" , width : "show" , opacity : "show" \} , 2000 )  
22.             .animate(\{height : "500"\} , 2000 );  
23.       \});  
24.       $("button:eq(1)").click(function () \{  
25.           $("\#panel").stop();//停止当前动画，继续下一个动画  
26.       \});  
27.       $("button:eq(2)").click(function () \{  
28.           $("\#panel").stop(true);//清除元素的所有动画  
29.       \});  
30.       $("button:eq(3)").click(function () \{  
31.           $("\#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画  
32.       \});  
33.       $("button:eq(4)").click(function () \{  
34.           $("\#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态   
35.       \});  
36.   
37. \})  
38. **</****script****>**  
39. **</****head****>**  
40. **<****body****>**  
41.  **<****button****>**开始一连串动画**</****button****>**  
42.  **<****button****>**stop()**</****button****>**  
43.  **<****button****>**stop(true)**</****button****>**  
44.  **<****button****>**stop(false,true)**</****button****>**  
45.  **<****button****>**stop(true,true)**</****button****>**  
46. **<****div** id="panel"**>**  
47.     **<****h5** class="head"**>**三国杀杀天下**</****h5****>**  
48.     **<****div** class="content"**>**  
49.         夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情  
50.     **</****div****>**  
51. **</****div****>**  
52. **</****body****>**  
53. **</****html****>****</****span****>**

(2)、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。

用法：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-family:SimSun;font-size:12px;"**>**if(!$(element).is(":animated"))\{  
2.      //添加新的动画  
3.  \}**</****span****>**

6、其他动画方法

除了上面提到的动画方法，jquery中还有3个专门用于交互的动画方法

toggle(speed\[,callback\])     切换元素可见状态，用来代替hide()和show()的。

slideToggle(speed\[,callback\])通过调整元素高度来切换可见状态，代替slideUp和slideDown的。

fadeTo(speed,opacity\[,callback\])将元素的不透明度渐变的调整到某一值。

[Center]: /images/20220824/5cccd20b412c4839bee7fa065d2ec1f1.png
[view plain]: http://blog.csdn.net/caohaicheng/article/details/24477707#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/312937
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/312937/fork