Chinaunix首页 | 论坛 | 博客
  • 博客访问: 922224
  • 博文数量: 210
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2070
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(210)

文章存档

2020年(2)

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: jQuery

2016-09-08 09:17:07

jQuery fadeIn() 用于淡入已隐藏的元素。

    $(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。


html代码

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/1.css"/>
  7.         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript" src="js/1.js"></script>
  9.     </head>
  10.     <body>
  11.         <button>Click Me box hidden</button>
  12.         <div id="box1"></div>
  13.         <div id="box2"></div>
  14.         <div id="box3"></div>
  15.     </body>
  16. </html>

2css代码:

点击(此处)折叠或打开

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. #box1{
  6.     width: 100px;
  7.     height: 100px;
  8.     background: red;
  9.     display: none;
  10. }
  11. #box2{
  12.     width: 100px;
  13.     height: 100px;
  14.     background: greenyellow;
  15.         display: none;
  16. }
  17. #box3{
  18.     width: 100px;
  19.     height: 100px;
  20.     background: deepskyblue;
  21.         display: none;
  22. }

3 js jq代码:

点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     
  4.     $(function(){
  5.         
  6.         
  7.         $("button").click(function(){
  8.             
  9.             $("#box1").fadeIn(5000); //毫秒
  10.             $("#box2").fadeIn("slow"); //缓慢
  11.             $("#box3").fadeIn("faset"); //快速
  12.             
  13.         })
  14.         
  15.         
  16.         
  17.         
  18.         
  19.     })
  20.     
  21.     
  22.     
  23.     
  24.     
  25.     
  26. }


阅读(594) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~