Jquery效果 淡入淡出
1. 介绍¶
上一个章节介绍显示和隐藏,参上参数就可以实现延时的效果,要是实现淡入淡出的效果, jQuery的fadeIn(), fadeOut(), fadeTo(), fadeToggle(),可以实现元素的淡入淡出效果。
2. 案例¶
2.1 fadeIn¶
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback)
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
- 可选的 callback 参数是 fading 完成后所执行的函数名称。
淡入效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>点击下面按钮,看下效果吧</p> <button>淡入效果</button> <div id="cmz1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="cmz2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="cmz3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> <script> $(function () { $('button').click(function () { $('#cmz1').fadeIn(); $('#cmz2').fadeIn('slow'); $('#cmz3').fadeIn(4000); }); }); </script> </html>
2.2 fadeOut¶
jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);
淡出效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>点击下面按钮,看下效果吧</p> <button>淡出效果</button> <div id="cmz1" style="width:80px;height:80px;display:block;background-color:red;"></div><br> <div id="cmz2" style="width:80px;height:80px;display:block;background-color:green;"></div><br> <div id="cmz3" style="width:80px;height:80px;display:block;background-color:blue;"></div> </body> <script> $(function () { $('button').click(function () { $('#cmz1').fadeOut(); $('#cmz2').fadeOut('slow'); $('#cmz3').fadeOut(4000); }); }); </script> </html>
2.3 fadeTo¶
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
透明度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>点击下面按钮,看下效果吧</p> <button>让我变颜色</button> <div id="cmz1" style="width:80px;height:80px;display:block;background-color:red;"></div><br> <div id="cmz2" style="width:80px;height:80px;display:block;background-color:green;"></div><br> <div id="cmz3" style="width:80px;height:80px;display:block;background-color:blue;"></div> </body> <script> $(function () { $('button').click(function () { $('#cmz1').fadeTo("slow",0.15); $('#cmz2').fadeTo("slow",0.4); $('#cmz3').fadeTo("slow",0.8); }); }); </script> </html>
2.4 fadeToggle¶
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
- 如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
- 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
交替淡入淡出效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <p>点击下面按钮,看下效果吧</p> <button>交替效果</button> <div id="cmz1" style="width:80px;height:80px;display:block;background-color:red;"></div><br> <div id="cmz2" style="width:80px;height:80px;display:block;background-color:green;"></div><br> <div id="cmz3" style="width:80px;height:80px;display:block;background-color:blue;"></div> </body> <script> $(function () { $('button').click(function () { $('#cmz1').fadeToggle(); $('#cmz2').fadeToggle('slow'); $('#cmz3').fadeToggle(4000); }); }); </script> </html>
注意点
虽然以上实现了淡入淡出等效果,其实本身的原理是修改其css的属性,而不是真正让元素消失。也就是改变css的display的值