学习jQuery之animate
学习 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>
在用到jquery.color.js 改变backgroundColor时需要有一默认的值，不然 默认的是：background:transparent ，jquery.color.js 会报错。
页:
[1]