jQuery入门[6]－动画 jQuery入门[1]－构造函数
jQuery入门[2]－选择器
jQuery入门[3]－事件
jQuery入门[4]－链式代码
jQuery入门[5]－AJAX
jQuery入门[6]－动画
jQuery直接各种动画，常见的被封装成各种方法，如show()/hide()/slideDown()/fadeIn()等等，参见：Effects
最灵活的则属于animate( params, [duration], [easing], [callback] )方法，参见：animate
其中params为动画的运行结果，可以为各种样式属性，jQuery将在duration指定的时间内，将对象的当前状态渐变为params参数指定的值。如：
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
params也可以是一些相对数据：
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
通过stop()函数可将对象再在执行的动画暂停。选择符:animated可以判断对象是否处在动画运行状态。
以下为来自官网的一个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
});
</script>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
</body>
</html>效果为不断变化的一个方块，因为最后一个动画$("div").slideUp("normal", runIt)执行后又 调用runIt方法，所以动画不断循环。
分享到：
相关推荐
《jQuery中文入门指南》是一本不错的参考资料，涵盖了从基础到高级的各种主题，对于初学者来说，是快速掌握jQuery的捷径。 总结，jQuery以其高效、简洁的特性，成为前端开发的重要工具。通过学习和熟练使用jQuery，...
jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。本文将深入探讨jQuery的设计思想及其核心功能，包括选择网页元素、改变结果集、链式操作、元素的操作以及元素...
**jQuery入门汇总** jQuery，一个轻量级的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。它简化了HTML文档遍历、事件处理、动画和Ajax交互等常见任务，大大提高了开发效率。本篇文章将深入浅出地介绍...
**jQuery入门篇** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。自2006年发布以来，jQuery已经成为了前端开发的标准工具之一，尤其对于初学者来说，它...
其次，`jquery-1.7.2.min.js`是jQuery库本身，它是EasyUI的基础，提供了DOM操作、事件处理、动画效果等基本功能。选择1.7.2版本是因为它在性能和兼容性上都有良好的表现，能与EasyUI组件无缝配合。 `easyloader.js`...
除此之外，"jquery-scroll-follow.js" 还可能提供了其他配置选项，如偏移量调整、动画效果等，以便于定制化需求。例如，可能有`offset`参数用于设置侧栏在顶部的距离，或者`duration`参数来控制切换到固定状态时的...
- **jQuery**：jQuery 是一个广泛使用的JavaScript库，它使得DOM操作、事件处理、动画和Ajax交互变得极其简单。在jQuery EasyUI中，jQuery作为基础，提供了便利的DOM选择器和链式操作。 - **jQuery EasyUI**：基于...
- **第一章：入门篇** - jQuery简介 - 安装与配置 - 基础语法和选择器 - **第二章：核心功能** - DOM操作详解 - 事件处理 - 动画效果 - **第三章：高级技巧** - AJAX应用 - 插件开发 - 性能优化 - **第四章...
jquery UI主要是用于是UI能变的能容易实现，不需要太多的css，里面已经写了很多类，可以直接使用，常见的图标，方向键头，实现滑动，切换，动画等等都很容易，方便开发在速度上的提升，入门容易，很快上手，
**jQuery教程——入门** jQuery是一款广泛应用于Web开发的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。这个“jQuery教程——入门”将带你逐步走进jQuery的世界，了解其基本概念和...
6. **动画效果**： - 动画效果的控制更精细，如`stop()`方法可以停止当前运行的所有动画，而`finish()`则会立即完成所有动画。 7. **Ajax增强**： - 提供了`$.ajaxPrefilter()`和`$.ajaxTransport()`，使得开发者...
"jquery-1.4.4.min.js"是jQuery库的核心文件，它是EasyUI的基础，负责处理DOM操作、事件处理和动画效果。EasyUI的大部分功能都是在jQuery的基础上实现的。 3. **EasyLoader** "easyloader.js"是jQuery EasyUI的...
### jQuery入门知识点详解 #### 一、jQuery的环境配置 1. **版本区分**：jQuery提供了两种版本供用户选择——**压缩版**和**非压缩版**。压缩版是为了提高加载速度，在正式环境中使用；非压缩版则包含了注释和空白...
**jQuery入门** jQuery是一款高效、简洁的JavaScript库，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先，...
这个压缩包"HTML5+CSS3+JQueryMobile入门-源代码.zip"提供了一套入门级别的学习资源，包含了实际的源代码，帮助初学者通过实践来理解这些技术。 首先，HTML5是超文本标记语言（HyperText Markup Language）的第五个...
第6章 Ajax在jQuery中的应用/159 6.1 加载异步数据/160 6.1.1 传统的JavaScript方法/160 6.1.2 jQuery中的load()方法/162 6.1.3 jQuery中的全局函数getJSON()/164 6.1.4 jQuery中的全局函数getScript()/166 ...
JQuery初体验--helloWorld”主题将引导你入门JQuery，通过一个简单的“Hello World”示例来展示其基本用法。 在JavaScript中，操作DOM（Document Object Model）通常是繁琐的，而JQuery提供了一种简洁的API来处理...
6. `readme.txt`：通常包含了项目的基本信息、使用指南和注意事项，是快速入门的重要参考。 7. `0.txt`：可能是空文件或者包含一些简短的说明，具体内容需要查看才能确定。 8. `plugins`：这个目录下包含了EasyUI...