`
hsys
  • 浏览: 285633 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JQuery实现淡入淡出效果

jQueryIECSSFirefoxChrome 
阅读更多
以前一直用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
分享到：
| Java、Mysql使用Like
评论
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吗？我怎么看不到效果？
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics