jquery怎么实现图片淡入淡出?示例

发布时间:2020-03-22编辑:脚本学堂
本文介绍了jquery实现图片的淡入与淡出的方法,一个jquery图片淡入淡出效果的例子,需要的朋友参考下。

jquery实现淡入淡出效果非常方便,这里我们使用slideUp与slidDown来实现jquery图片淡入淡出,一起学习下。

例子,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>图片淡入淡出效果_www.jb200.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(){ 
            $("img").slideUp("slow"); 
            },function(){ 
                $("img").slideDown("slow"); 
        });  
    });
</script> 
</head> 
<body> 
<img src="./images/001.jpg"><br> 
<input type="button" value="图片显示/隐藏" id="btn1"> 
</body> 
</html>

以上就是jquery图片淡入与淡出效果的实现方法,主要用到了slideUp与slideDown方法,希望对大家有所帮助。