Jquery的几种动态效果(animate)

hsys

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

最近访客更多访客>>

cserbaby

janiter

buralin

xuzhou530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery Firefox Chrome Linux 浏览器

<html>
<head>
<title>animate</title>
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		// 在一个动画中同时应用三种类型的效果
		$("#go").click(function(){
		  $("#block3").animate({ 
		    width: "200px",
		    height: "200px", 
		    fontSize: "20px", 
		    borderWidth: "1px",
		    top:"400px",
		    left:"400px",
		    opacity: "show"
		  }, 3000 );
		});
		
		$("#stop").click(function(){
			$("#block3").stop();
		});
		
		$("#right").click(function(){
		  $(".block").animate({left: '+50px'}, "slow");
		});
		
		$("#left").click(function(){
		  $(".block").animate({left: '-50px'}, "slow");
		});
		
		$("p").animate({
	    height: 'toggle', opacity: 'toggle'
	  }, "slow");
		
		$("#go1").click(function(){
		  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
		     .animate( { fontSize: '10em' } , 1000 )
		     .animate( { borderWidth: 5 }, 1000);
		});
		
		$("#go2").click(function(){
		  $("#block2").animate( { width: "90%"}, 1000 )
		     .animate( { fontSize: '10em' } , 1000 )
		     .animate( { borderWidth: 5 }, 1000);
		});
	 
	});
	
</script>

<style>
	.showDiv
	{
		width:100px;
		height:100px;
		border:1px red solid;
		display:none;
		position:absolute;
		left:50px;
		top:50px;
		color:#C7EDCC;
   	background-color:#C7EDCC;
   	filter: Alpha(Opacity=60);
    opacity: 0.6;
	}
	
	.block
	{
		width:200px;
		height:200px;
		border:1px red solid;
		position:absolute;
		left:100px;
		top:100px;
		color:#C7EDCC;
   	background-color:#C7EDCC;
   	filter: Alpha(Opacity=60);
    opacity: 0.6;
	}
</style>
</head>

<body>
<input type="button" value="run" id="go" />
<div id="block3" class ="showDiv">Hello!</div>
<input type="button" value="stop" id="stop" />

<br>

<input type="button" id="left" value="left"/> 

<input type="button" id="right" value="right"/>
<div class="block"></div>


<br>

<p>adjfksdjfl</p>

<br>

<input type="button" id="go1" value="Animate Block1" />
<input type="button" id="go2" value="Animate Block2" />
<div id="block1">Block1</div><div id="block2">Block2</div>

</body>
</html>

效果自己点击看看吧，我就不多说了。。

animate.rar (140 KB)
下载次数: 2133

分享到：

Ajax 实现联动效果 | 从程序员到CTO的六项能力

2010-02-02 16:43
浏览 2606
评论(14)
论坛回复 / 浏览 (14 / 19435)
分类:Web前端
查看更多

14 楼 kukuwuwu 2010-03-29

很讨厌那些不尊重别人劳动成果的人
有问题就说问题，发什么牢骚啊！
发帖子本来就是让人交流的
不是让你们评论好坏的！
还有那些随便给人投隐藏贴的人
一点都不尊重别人的劳动成果

13 楼 xinchen1224 2010-03-26

我试过了，达到了楼主说的效果，呵呵，正好在学习这个，呵呵。

12 楼 iamlomen 2010-03-05

yhjhoo 写道

在不同浏览器下竟然有乱码，垃圾

自己菜就別老亂評價別人，技術的路上最忌諱浮躁，那樣的話你的路不會很長！

11 楼 ring09h 2010-02-05

有颤抖效果，LZ难道没发现？

10 楼 orcl_zhang 2010-02-05

左右，移动的效果不错。

9 楼 leafcold 2010-02-05

试了一下，还不错。

8 楼 hsys 2010-02-04

如果说我的程序测试不足和js错误，我真的没有办法了，我这边的IE8和Firefox都是好的，没有js错误，至于乱码，确实是我的文件有问题，不过我目前只是发现在Firefox的firebug下会出现乱码，在页面上不会的，这是因为我是用UtralEdit编写的程序，保存的时候，编码是默认的，所以有这个问题，大家可以不用我上传的文件，自己写一遍，也可以拷贝上面的。

7 楼 suny95210 2010-02-04

发帖前，测试做的不足，错误很多

6 楼 xukunwzq 2010-02-04

呵呵我这下载下来后看不了，js错误。。。

5 楼 xiaojiit 2010-02-04

看了一下，left,right 这个效果还可以。

4 楼 haiyupeter 2010-02-04

是不是用了linux？

3 楼 wing5jface 2010-02-04

LZ我试过在IE6,firefox, chrome下浏览都没有问题，是不是没有取得正确的html造成?

我按楼主的附件文件保存为UTF-8格式，并添加在<head>部分添加
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2 楼 yhjhoo 2010-02-04

在不同浏览器下竟然有乱码，垃圾

1 楼 wing5jface 2010-02-03

楼主做的在线效果可以下述网页即时观看，的确很好用（主机0205已修复,看来要注重网站安全呵）
http://www.sh2999.com/sh/jqueryShow/animate/animate.html

简单将Jquery改用为Google加速载入
即由
<script type='text/javascript' src="jquery/jquery-1.3.1.js"></script>
改为-------->
<script src="http://www.google.com/jsapi" language="javascript">
</script>
<script language="javascript">
google.load("jquery", "1.3.2");
</script>

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论