1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > jQuery 效果 - 淡入淡出 fadeIn fadeOut fadeToggle的使用

jQuery 效果 - 淡入淡出 fadeIn fadeOut fadeToggle的使用

时间:2022-05-30 19:45:00

相关推荐

jQuery 效果 - 淡入淡出 fadeIn fadeOut fadeToggle的使用

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){//fadeOut() 方法用于淡出可见元素$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);//fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换//$("#div1").fadeToggle();//$("#div2").fadeToggle("slow");//$("#div3").fadeToggle(3000);// fadeIn() 用于淡入已隐藏的元素//$("#div1").fadeIn();//$("#div2").fadeIn("slow");//$("#div3").fadeIn(3000);//fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)//$("#div1").fadeTo("slow",0.15);//$("#div2").fadeTo("slow",0.4);//$("#div3").fadeTo("slow",0.7);});});</script></head><body><p>演示带有不同参数的 fadeOut() 方法。</p><button>点击这里,使三个矩形淡出</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。