学习 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 会报错。
分享到：
相关推荐
这个"jQuery+Animate+Demo+By_褪色"的项目可能是由一个名为“褪色”的开发者创建的，旨在展示如何利用jQuery的Animate方法来制作动画效果。 在jQuery中，Animate方法允许开发者自定义动画，包括改变宽度、高度、...
《jQuery结合animate.css实现自定义弹窗动画插件详解》 ...通过学习和实践这个例子，开发者可以掌握如何运用jQuery进行事件处理、动画控制，以及如何结合animate.css创建丰富的动态效果，进一步提升自己的Web开发技能。
jQueryAnimate3d是一款专为网页设计师和开发者设计的高效、炫酷的JavaScript插件，它主要专注于实现鼠标滑过时的3D透视特效。这款插件基于jQuery库，利用其强大的DOM操作能力和事件处理功能，使得在网页上创建动态、...
《jQuery的animate()方法：实现购物车飞入效果详解》 在网页开发中，动态效果的运用能够极大地提升用户体验，让交互变得更加生动有趣。今天我们将深入探讨如何利用jQuery的animate()方法来创建一个购物车飞入的效果...
首先，了解jQuery的核心功能之一——动画。jQuery的animate函数允许开发者自定义元素的CSS属性，如位置、大小、颜色等，并在指定时间内平滑地改变这些属性，从而创建出各种复杂的动画效果。它的基本语法如下： ```...
总之，"jquery animate网站banner动画效果.zip"是一个实用的学习资源，它演示了如何利用jQuery的animate方法和CSS3的animate属性协同工作，创建出富有创意的网站横幅动画。无论是初学者还是经验丰富的开发者，都能...
通过学习和实践"jQuery Animate图片无缝滑动"特效，开发者不仅能掌握JavaScript和jQuery的动画技术，还能深入了解网页布局、事件处理以及用户体验优化等方面的知识。对于网页设计师和前端开发者来说，这是一种实用且...
在JavaScript的世界里，jQuery库以其简洁...总结来说，这个主题为我们提供了一个深入学习jQuery动画机制的机会，通过分析和实践这些超炫的`animate`实例，我们可以提升Web开发技能，创造出更加生动、吸引人的网页效果。
jQuery的`animate`函数是其强大的动画功能的核心，允许开发者创建复杂的、平滑的CSS属性变化效果。在本文中，我们将深入探讨`animate`函数的工作原理，特别是涉及到的`easing`函数，以及如何利用它们来实现不同类型...
这个"jquery animate分页按钮"项目是一个很好的学习案例，它展示了如何结合jQuery的动画功能和事件处理来增强网页的交互体验。通过深入研究和实践，开发者不仅可以掌握这一特定的分页效果，还能进一步理解jQuery的...
在本篇文章中，作者主要探讨了如何利用jQuery的animate()方法和CSS3属性相结合来实现一种缓动追逐效果。通过这种方式，可以在现代网页中创建更加平滑和吸引人的动画效果，提升用户体验。下面，我将详细阐述这一技术...
《jQuery手册：深入学习jQuery》 在Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和实用技巧，帮助你全面掌握这...
jQuery 是一个广泛使用的JavaScript库，由John Resig于2006年创建，它极大地简化了JavaScript编程，尤其是处理DOM操作、事件处理、...通过深入学习jQuery，可以更好地驾驭Web前端开发，提升网站的交互性和用户体验。
由于其简洁的语法和强大的功能，jQuery成为了前端开发中的首选工具之一。 这篇博文链接（https://lxy19791111.iteye.com/blog/163447）可能提供了一些关于jQuery的学习资源，虽然具体内容无法在这里直接展示，但...
通过这篇文章的内容，我们可以了解到如何利用jQuery实现简单的动画效果，并且可以进一步学习和掌握jQuery库的其他功能，比如事件监听、DOM操作等，这些都是进行Web开发时不可或缺的技能。同时，了解如何通过编写或...
昨天突然有网友问我animate()方法可以来操作所有css属性吗？是的，我告诉他可以的。...接下来通过本篇文章给大家介绍基于jquery animate操作css样式属性小结，对jquery animate css相关知识感兴趣的朋友一起学习吧
学习jQuery时，可以从以下几个方面入手： 1. **基础API**：掌握jQuery的选择器，如`$()`, `.find()`, `.siblings()`等，以及DOM操作，如`.html()`, `.append()`, `.attr()`等。 2. **事件处理**：理解`.on()`, `....
学习jQuery的过程中，理解其基本用法并结合C#进行前后端交互，是提升Web开发效率的关键。实践项目、阅读源码、参与社区讨论都是深化理解的好方式。不断探索和实践，你将逐渐掌握这个强大的工具。