jquery文字淡入淡出效果代码

发布时间:2020-11-02编辑:脚本学堂
本文介绍了jquery实现文字淡入淡出效果的一例代码,fadeIn与fadeto实现文字的淡入与淡出,不了解的朋友可以参考下。

例子,jquery实现文件的淡入与淡出效果。
 

复制代码 代码示例:
<!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=utf-8" /> 
<title>jquery文字淡入淡出--www.yuju100.com</title> 
<script type="text/javascript" language="javascript" src="./jquery-1.7.1.min.js"> 
</script> 
<script language="javascript"> 
$(document).ready(function(){ 
    $("#btn1").toggle(function(){ 
            $("p").fadeOut("slow"); 
            },function(){ 
                $("p").fadeIn("slow"); 
        }); 
        $("#btn2").toggle(function(){ 
             
            $("p").fadeTo("slow",0.66); 
            },function(){ 
                $("p").fadeTo("slow",0.66);  
        });  
    }); 
</script> 
</head> 
<body>
jquery实现文字淡入淡出效果,由(www.jb200.com)整理。
<p style="background:#3F3">this is pi<br> 
this is pi<br> 
this is pi<br> 
this is pi<br> 
this is pi<br> 
this is pi<br> 
</p> 
<input type="button" value="淡入/淡出" id="btn1"> 
</body> 
<input type="button" value="淡入/淡出 效果 透明度0.66" id="btn2"> 
</html>