jQuery----JQuery动画（hide()和show()）（上）

最新推荐文章于 2022-11-11 23:00:55 发布

de7439

最新推荐文章于 2022-11-11 23:00:55 发布

阅读量453

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/WangYujie1994/p/10283751.html

版权

hide()和show()方法，可以设置动画效果，本文对这两种方法效果加以说明。

hide(参数1，参数2)：

参数1：时间，单位为毫秒，表示对象隐藏所用的时间

参数2：回调函数，该函数在对象隐藏后触发。

show(参数1，参数2)：

参数1：同上

参数2：同上

示例：

需求说明：点击一个图片，该图片缓缓隐藏，隐藏后从页面删除，后一张图片补充前一张图片的位置

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         img{
 8             width: 100px;
 9             height: 80px;
10         }
11         
12         #pics div{
13             float: left;
14             margin: 2px;
15             width: 100px;
16             height: 80px;
17         }
18     </style>
19     <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
20     <script>
21         $(function(){
22             //获取所有的图片,并注册点击事件
23             $("#pics>div").click(function(){
24                 $(this).hide(800,function(){
//回调函数，清除当前点击的元素
25                     $(this).remove();//方法移除当前调用这个方法的元素---自杀
26                 });
27             });
28         });
29     </script>
30 </head>
31 <body>
32     <div id="pics">
33         <div><img src="images/01.jpg" ></div>
34         <div><img src="images/02.jpg" ></div>
35         <div><img src="images/03.jpg" ></div>
36         <div><img src="images/04.jpg" ></div>
37         <div><img src="images/05.jpg" ></div>
38     </div>
39 </body>
40 </html>

备注：

 $(this).remove();//方法移除当前调用这个方法的元素---自杀

转载于:https://www.cnblogs.com/WangYujie1994/p/10283751.html

de7439

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery----JQuery动画（hide()和show()）（上）

hide()和show()方法，可以设置动画效果，本文对这两种方法效果加以说明。hide(参数1，参数2)：参数1：时间，单位为毫秒，表示对象隐藏所用的时间参数2：回调函数，该函数在对象隐藏后触发。show(参数1，参数2)：参数1：同上参数2：同上示例：需求说明：点击一个图片，该图片缓缓隐藏，隐藏后从页面删除，后一张图片补充前一张图片的位置...
复制链接

扫一扫