欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-08-19 14:25:05
hide()和show()方法，可以设置动画效果，本文对这两种方法效果加以说明。 hide(参数1，参数2)： 参数1：时间，单位为毫秒，表示对象隐藏所用的时间 参数2：回调函数，该函数在对象隐藏后触发。 show(参数1，参数2)： 参数1：同上 参数2：同上 示例： 需求说明：点击一个图片，该图 ......

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

hide(参数1，参数2)：

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

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

show(参数1，参数2)：

参数1：同上

参数2：同上

 

示例：

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

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

 

代码如下：

 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();//方法移除当前调用这个方法的元素---自杀

上一篇： 金窝窝研究院：关注！新规出台，区块链行业又起新变化？

下一篇： 使用Jquery Viewer 展示图片信息

推荐阅读