语法：
$(selector).fadeIn(speed,callback); 用于淡入已隐藏的元素display:none。
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
speed效果时长，以下值："slow"、"fast" 或毫秒。
callback参数是 fading 完成后所执行的函数名称。
$(selector).fadeTo(speed,opacity,callback);
效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
完成后所执行的函数名称
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style media="screen"> div{ width:80px; height:80px; } </style> <script> $(document).ready(function(){ $(".fadei").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(2000); }); }); $(document).ready(function(){ $(".fadeo").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(2000,function(){ alert('执行完毕,可以执行函数') }); }); }); $(document).ready(function(){ $(".fadeToggle").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(2000); }); }); $(document).ready(function(){ $(".fadeTo").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.9); }); }); </script> <body> <button class="fadei">点击淡入fadeIn()</button> <button class="fadeo">点击淡出fadeOut()</button> <button class="fadeToggle">淡入淡出相互切换fadeToggle()</button> <button class="fadeTo">淡出透明度fadeTo()</button> <br><br> <div id="div1" style="display:none;background-color:red;"></div> <br> <div id="div2" style="display:none;background-color:green;"></div> <br> <div id="div3" style="display:none;background-color:blue;"></div> </body> |
我的微信
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
