发布时间：2025-12-10 22:47:26 浏览次数：1
淡入有3种方法:1、fadeIn(),可以淡入隐藏元素,语法“元素对象.fadeIn(淡入时长)”;2、fadeTo(),语法“元素对象.fadeTo(时长,1)”;3、fadeToggle(),语法“对象.fadeToggle(时长)”。
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
在jquery中,能实现淡入效果的有三个方法:
fadeIn() 方法
fadeToggle() 方法
fadeTo() 方法
1、fadeIn() 方法
fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
示例:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#p1").fadeIn();$("#p2").fadeIn("slow");$("#p3").fadeIn(3000);});});</script></head><body><p>以下实例演示了fadeIn()使用了不同参数的效果。</p><button>点击淡入p元素。</button><br><br><pid="p1"style="width:80px;height:80px;display:none;background-color:red;"></p><br><pid="p2"style="width:80px;height:80px;display:none;background-color:green;"></p><br><pid="p3"style="width:80px;height:80px;display:none;background-color:blue;"></p></body></html>2、fadeTo() 方法
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
只需要将opacityc参数的值设置为1,即可实现淡入效果。
$(document).ready(function(){$("button").click(function(){$("#p1").fadeTo("fast",1);$("#p2").fadeTo("slow",1);$("#p3").fadeTo(5000,1);});});3、fadeToggle() 方法
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已隐藏,则 fadeToggle() 会向元素添加淡入效果。
如果元素已显示,则 fadeToggle() 会向元素添加淡出效果。
$(document).ready(function(){$("button").click(function(){$("#p1").fadeToggle();$("#p2").fadeToggle("slow");$("#p3").fadeToggle(5000);});});读到这里,这篇“jquery淡入的方法是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注本站行业资讯频道。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流