学习jQuery之animate

最新推荐文章于 2023-02-08 21:12:08 发布

princegang

最新推荐文章于 2023-02-08 21:12:08 发布

阅读量104

点赞数

分类专栏： JavaScript & Ajax 文章标签： jQuery Google UI Ajax XHTML ViewUI

JavaScript & Ajax 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

学习 animate 记录下，备忘。


<!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>jquery animate</title>
</head>
<body>

<a href="#">
text
</a>
<div class="stuff" style="border:8px solid red;background-color:#fff;">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。</div>
<script type="text/javascript" src="jquery.js"></script>

<!-- 1：对 color 的支持 在：http://plugins.jquery.com/project/color 下载 -->
<script type="text/javascript" src="jquery.color.js"></script>

<!-- 也可以  include Google's AJAX API loader
<script src="http://www.google.com/jsapi"></script>-->
<!-- load JQuery and UI from Google (need to use UI to animate colors)
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script> 支持 color--> 

<script type="text/javascript">
$(document).ready(function(){
   $("a").toggle(function(){
	  $(".stuff").animate({margin: '200px', borderWidth:'1px',backgroundColor:'#ccc'}, 'slow').animate({width:'hide',opacity:'hide'},'slow');
   },function(){
	 $(".stuff").animate({height:'show',opacity:'show'},'slow').animate({ margin: '10px',borderWidth:'8px',backgroundColor:'#ffff00'}, 'slow');
   });
});
</script>
</body>
</html>