|
锁定老帖子 主题：JQuery实现淡入淡出效果
精华帖 (0) :: 良好帖 (0) :: 新手帖 (8) :: 隐藏帖 (2)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-29
最后修改：2010-02-01
以前一直用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下测试过了。。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-30
lz测试过IE7吗？我怎么看不到效果？
|
| 返回顶楼 | |
|
发表时间：2010-01-30
难道是因为我这边是jquery-1.2.6.js???
建议楼主把Demo传上来run一把。 |
| 返回顶楼 | |
|
发表时间：2010-01-31
运行不了
|
| 返回顶楼 | |
|
发表时间：2010-02-01
我上传了Demo，大家可以看一下，在IE8和Firefox下是可以运行的
|
| 返回顶楼 | |
|
发表时间：2010-02-01
引用 var $popup = $("#popup");
$popup...... 可以把它“缓存”起来。 除了lz写的，还有很多效果，animate()、slideUp()、slideDown()、show()、hide()..都是jquery内置的函数，用起来很方便。 |
| 返回顶楼 | |
|
发表时间：2010-02-02
jquery ui 的效果非常多啊 淡入 淡出 很 基本的东西吧
|
| 返回顶楼 | |
|
发表时间：2010-02-03
IE啊IE。。。
|
| 返回顶楼 | |
|
发表时间：2010-02-03
都Chrome了，IE已经out啦，bug也一大堆
|
| 返回顶楼 | |
|
发表时间：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 |
| 返回顶楼 | |
