JQuery实现淡入淡出效果

hsys

浏览: 290435 次
性别:
来自: 杭州

最近访客更多访客>>

cserbaby

janiter

buralin

xuzhou530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery IE CSS Firefox Chrome

以前一直用JavaScript，现在发现了Jquery的UI简单方便
下面实现了层的淡入淡出和半透明

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>JQuery淡入淡出效果</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script>
function fadeIn(){	
	
	$("#popup").fadeIn(3000);
	$("#popup").css("position","absolute");
	$("#popup").css("left","300px");
	$("#popup").css("top","400px");
}

function fadeOut(){
	$("#popup").fadeOut(2000);
}
function fadeTo(){
	$("#popup").fadeTo(3000,0.5);
}
</script>
<body>
	<input type="button" value="弹出层" onclick="fadeIn()" >
	<div id="popup" style="width:200px;height:200px;border:1px red solid;display:none;background-color:red;">
		弹出层的试验
		<br>
		<input type="button" value="取消" onclick="fadeOut()" >
		<input type="button" value="半透明" onclick="fadeTo()" >
	</div> 
</body>
</html>

这个程序，我在IE8和FireFox下测试过了。。

fade.rar (139.6 KB)
下载次数: 1274

分享到：

Jquery表单验证 | Java、Mysql使用Like

2010-01-29 17:51
浏览 2612
评论(10)
论坛回复 / 浏览 (10 / 20317)
分类:Web前端
查看更多

10 楼 yuxiaojicai 2010-02-04

火狐上可以运行。不错@@！

9 楼 wing5jface 2010-02-03

引用jquery 1.3.2
<script src="http://www.google.com/jsapi" language="javascript">
</script>
<script language="javascript">
google.load("jquery", "1.3.2");
</script>
显示正常，在线效果可以观看
http://www.sh2999.com/sh/jqueryShow/fade/fade.html

8 楼 wese345 2010-02-03

都Chrome了，IE已经out啦，bug也一大堆

7 楼 zy_pub 2010-02-03

IE啊IE。。。

6 楼 lioncin 2010-02-02

jquery ui 的效果非常多啊淡入淡出很基本的东西吧

5 楼 hyj1254 2010-02-01

引用

var $popup = $("#popup");
$popup......

可以把它“缓存”起来。
除了lz写的，还有很多效果，animate()、slideUp()、slideDown()、show()、hide()..都是jquery内置的函数，用起来很方便。

4 楼 hsys 2010-02-01

我上传了Demo，大家可以看一下，在IE8和Firefox下是可以运行的

3 楼 Blithe 2010-01-31

运行不了

2 楼远去的渡口 2010-01-30

难道是因为我这边是jquery-1.2.6.js???
建议楼主把Demo传上来run一把。

1 楼远去的渡口 2010-01-30

lz测试过IE7吗？我怎么看不到效果？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论