16jquery学习笔记-------动画----两种层显示和隐藏slide、fade 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script src="jquery-1.8.3.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $('#btnSlideDown').click(function () {
 9                 $('div').slideDown('fast');
10             });
11             $('#btnSlideUp').click(function () {
12                 $('div').slideUp('normal');
13             });
14             $('#btnSlideToggle').click(function () {
15                 $('div').slideToggle('slow');
16             });
17             $('#btnFadeIn').click(function () {
18                 $('div').fadeIn(1000);
19             });
20             $('#btnFadeOut').click(function () {
21                 $('div').fadeOut(2000);
22             });
23             $('#btnFadeToggle').click(function () {
24                 $('div').fadeToggle(3000);
25             });
26         });
27 
28     </script>
29 </head>
30 <body>
31     <input id="btnSlideDown" type="button" name="name" value="slideDown">
32     <input id="btnSlideUp" type="button" name="name" value="slideUp" />
33     <input id="btnSlideToggle" type="button" name="name" value="slideToggle" />
34     <input id="btnFadeIn" type="button" name="name" value="fadeIn" />
35     <input id="btnFadeOut" type="button" name="name" value="fadeOut" />
36     <input id="btnFadeToggle" type="button" name="name" value="fadeToggle" />
37     <div style="height:300px;width:400px;background-color:green;">
38 
39     </div>
40 </body>
41 </html>

 

posted on 2016-01-13 21:12  努力的活着_在人间  阅读(180)  评论(0)    收藏  举报

导航