jQuery学习笔记（二）－效果和Callback函数

最新推荐文章于 2021-07-24 19:48:45 发布

原创最新推荐文章于 2021-07-24 19:48:45 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍jQuery中动画效果的实现方法，包括hide、show等函数，并详细解释如何通过回调函数解决动画执行过程中可能出现的同步问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 效果 - 来自本页

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画

问题的引出：jQuery 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，这个时候就需要Callback函数出马了，您可以以参数的形式添加 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(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>

错误：

$("p").hide(1000);
alert("The paragraph is now hidden");

结论：

如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。

转自W3School：http://www.w3school.com.cn/jquery/index.asp