正文

jQuery_效果(淡入淡出)

IP云
IP云V管理员/2 阅读
09/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、jQuery fadeIn() 方法（ 用于淡入已隐藏的元素。）

语法：

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript"> $(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); });</script></head><body> <button>点击这里，使三个矩形淡入</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div></body>

2、jQuery fadeOut() 方法（用于淡出可见元素）

语法：

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript"> $(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); });</script></head><body> <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>

3、jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript"> $(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); });</script></head><body> <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>

4、jQuery fadeTo() 方法（允许渐变为给定的不透明度（值介于 0 与 1 之间））

语法：$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript"> $(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",0.1); $("#div2").fadeTo("slow",0.5); $("#div3").fadeTo("slow",0.9); }); });</script></head><body> <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>