fading方法(淡入淡出):
1、fadein(), 用于淡入已隐藏的元素
语法:$(selector).fadeIn(speed,callback);
speed 参数规定效果的时长,它可以取:"slow"、"fast" 或毫秒;callback 参数是 fading 完成后所执行的函数名称
html: <button class="btn">点击</button> <div class="div1" style=" 50px; height: 50px; background: yellow; display: none;"></div> <div class="div2" style=" 50px; height: 50px; background: blue; display: none;"></div> <div class="div3" style=" 50px; height: 50px; background: red; display: none;"></div>
jq: <script> //点击淡入div元素 $(function(){ $(".btn").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script>
2、fadeout(),用于淡出可见元素
jq: <script> //点击淡出div元素 $(function(){ $(".btn").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }); </script>
3、fadeToggle(),可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
jq: <script> //点击淡入淡出 $(function(){ $(".btn").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script>
4、fadeTo(),允许渐变为给定的不透明度(值介于 0 与 1 之间)
语法:$(selector).fadeTo(speed,opacity,callback);
其中,speed和opacity是必需参数
jq: <script> //渐变透明度 $(function(){ $(".btn").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.3); $("#div3").fadeTo("slow",0.8); }); }); </script>