Jquery实战学习--jQuery 效果 - 淡入淡出

最新推荐文章于 2025-06-24 10:58:17 发布

左岸人生

最新推荐文章于 2025-06-24 10:58:17 发布

阅读量800

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/zuoanren/article/details/8789538

JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍使用jQuery实现淡入淡出效果的方法，包括fadeIn()、fadeOut()、fadeToggle()和fadeTo()四个函数的应用。通过示例代码展示了不同速度参数下元素的淡入淡出变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery 效果 - 淡入淡出</title>
<script type="text/javascript" src="jquery-1.7.js"></script>
</head>

<body>
<!--
jQuery 效果 - 淡入淡出:
①：fadeIn();方法：用于淡入已经隐藏的元素。
②：fadeOut();方法：用于淡出可见元素。
③：fadeToggle();方法：该方法可以在fadeIn()和fadeOut()方法之间切换。
    如果元素已经淡出，则fadeToggle()，会像元素中添加淡出效果。
    如果元素已经淡入，则fadeToggle()，会像元素中添加淡入效果。
④：fadeTo();方法：允许渐变为给定的不透明度(在0-1之间)

其中:"slow"，表示以慢的速度进入。
    "fast"，表示以快的速度进入。
-->
<input type="button" id="but" value="淡入淡出"/>
<div style=" width:100px; height:100px; background-color:#FF0000" id="div1" ></div>
<div style=" width:100px; height:100px; background-color:#FF00FF" id="div2" ></div>
<div style=" width:100px; height:100px; background-color:#999999" id="div3" ></div>

</body>
<script type="text/javascript">
    $("#but").click(function(){
        $("#div1").fadeToggle("slow");
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle("fast");
    });
</script>
</html>