动画创造了对 callback 函数的需求。
————————————————————
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback 函数。
————————————————————
jQuery Callback 函数
当动画 100% 完成后，即调用 Callback 函数。
典型的语法：
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
错误（没有 callback）
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(2000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
正确（有 callback）
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。
分享到：
相关推荐
- **jQuery对象**：使用`$()`函数选择的元素集合，可以执行jQuery特有的方法。 - **DOM对象**：原生JavaScript中的DOM元素，只能使用DOM API操作。 转换关系： - DOM对象转jQuery对象：`$(domElement)`。 - ...
学习资料包括： 1.JQuery简介 2.JQuery语法 3.JQuery选择器 4.JQuery事件 ...5.JQuery Callback函数 6.JQuery常用函数 另外还有jquery中文参考文档，希望能对想要学习jquery的朋友有所帮助!
《jQuery API 函数详解》 jQuery，作为一款广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画设计以及Ajax交互。本篇将基于提供的"jqueryAPI函数chm文档"，深入探讨jQuery的核心API函数，帮助...
《jQuery函数大全详解》 jQuery库是JavaScript中最广泛使用的库之一，它简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是一份详尽的jQuery函数大全，涵盖了基础函数实现及其用法。 1. **Attribute操作**： ...
jQuery提供了一个简单的API来根据ID选择元素，即`$("#elementId")`。这里的`#`符号表示我们正在寻找具有特定ID的元素。 要从元素中获取`id`的值，我们可以使用`attr()`方法。例如，如果我们有一个元素`...
一旦用户释放鼠标（`mouseup`事件），`jquery.dad.js`会根据新的位置更新元素的顺序，并可能触发回调函数，以便开发者可以处理排序后的逻辑，如保存新的顺序到服务器。 然而，任何复杂的JavaScript库都可能遇到bug...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
4. **链式调用**：jQuery的链式调用机制使得在同一个元素上连续执行多个操作变得简单，每个方法返回的都是jQuery对象，可以无缝连接到下一个方法。这种方法也支持回调，例如： ```javascript $('#myElement') ....
### 如何实现jQuery中的回调函数 #### 背景与目的 在Web开发中，前后端之间的交互至关重要。为了实现实时更新用户界面而无需重新加载整个页面的需求，使用Ajax技术进行异步通信成为一种常见做法。jQuery作为一款...
**jQuery学习示例源码——jQuery基本知识** jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的设计目标是使JavaScript编程变得更简单、更易用，它封装了...
### JQuery中的Ajax函数详解 #### 一、$.get() **函数定义**： ```javascript $.get(url, [data], [callback]) ``` **说明**： `$.get()` 是 jQuery 提供的一个用于发起 GET 请求的简便函数。它允许你向服务器...
### jQuery 学习进阶使用知识点详解 #### 一、jQuery 遍历方法 **1. 获取父节点** - **parent() 方法**: 返回被选元素的直接父元素。 - 示例代码：`$("span").parent();` 这将返回 `<li>` 元素。 - **parents()...
**jQuery 学习指南** jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。通过 jQuery，开发者能够更高效地编写跨浏览器的 JavaScript 代码，使得网页交互更加生动有趣。 ...
回调函数是编程中一种常见的概念，尤其是在JavaScript和jQuery中被广泛使用。回调函数允许一个函数在完成其当前任务后，可以再执行一段代码，以此来实现异步处理和程序流程控制。 在jQuery中，回调函数的使用非常...
`$(element).animate({params}, duration, easing, callback)`允许你控制速度曲线（easing）和回调函数。 ### 五、Ajax交互 jQuery的`$.ajax()`方法是进行异步数据请求的核心，它可以发送GET和POST请求，处理JSON,...
在jQuery中，`hide()`、`show()`、`toggle()`以及动画函数`animate()`等都可以接受一个callback函数作为参数。这个callback函数通常会在动画或动作完成后被触发执行，比如在元素完全显示或隐藏后需要执行的额外代码...
jQuery的核心在于其构造器——`jQuery()`函数，通常简写为`$()`。这个函数极其重要，因为几乎所有的jQuery操作都是基于此函数进行的。它可以接受多种类型的参数： - **`jQuery(expression, [context])`**：通过提供...
网页模板——jQuery Pagination 是一个基于JavaScript库jQuery的高效分页插件，用于在网页中实现数据的分页显示。在Web开发中，特别是在处理大量数据时，分页是一种常见的优化用户体验的方法，它允许用户逐步浏览...