Html+Css+Jquery淡入与淡出-CFANZ编程社区

Html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <input type="button" value="淡入" id="fadeIn" />
       <input type="button" value="淡出" id="fadeOut" />
       <input type="button" value="切换" id="fadeToggle" />
       <input type="button" value="淡入到那里" id="fadeTo" /><br /><br />
       <div id="div"></div>
   </body>
</html>

Css部分

* {
margin: 0;
padding: 0;
}

input:nth-child(1) {
margin: 0 0 0 750px;
}

input {
   width: 100px;
   height: 30px;
   margin: 50px 0;
}

div {
   width: 200px;
   height: 200px;
   background-color: red;
   display: none;
   margin: 20px auto;
}

Jquery部分

$(function() {
   //1.淡入 fadeIn
   $('#fadeIn').click(function() {
       //让 id 为 div 的这个元素淡入.
       //$('#div').fadeIn(); //不给参数相当于给了一个默认的动画时长,mormal400 毫秒
       $('#div').fadeIn(1000);
   });
   //2.淡出 fadeOut
   $('#fadeOut').click(function() {
       //让 id 为 div 的这个元素淡出
       $('#div').fadeOut(1000);
   });
   //3.切换 fadeToggle
   $('#fadeToggle').click(function() {
       $('#div').fadeToggle(1000);
   });
   //4.淡入到那里 fadeTo
   $('#fadeTo').click(function() {
       $('#div').fadeTo(1000, 0.5);
   });
});