元素往右边移动了 100 像素，然后增加文本的字号：

实例 2

$("button").click(function(){

    var div=$("div");

    div.animate({left:'100px'},"slow");

    div.animate({fontSize:'3em'},"slow");

});

2、jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

实例

jQuery stop() 滑动
演示 jQuery stop() 方法。

jQuery stop() 动画(带参数)
演示 jQuery stop() 方法

---

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

实例

$("#stop").click(function(){

    $("#panel").stop();

});

3、jQuery Callback 方法

---

Callback 函数在当前动画 100% 完成之后执行。

---

jQuery 动画的问题

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

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

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

实例

以下实例在隐藏效果完全实现后回调函数:

使用 callback 实例

$("button").click(function(){    $("p").hide("slow",function(){

        alert("段落现在被隐藏了");

    });

});

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

没有 callback(回调)

$("button").click(function(){

    $("p").hide(1000);

    alert("段落现在被隐藏了");

});

4、jQuery - 链(Chaining)

---

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。

---

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句(一条接着另一条)。

不过，有一种名为链接(chaining)的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我们也可以添加多个方法调用。

提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

实例

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

更多精彩推荐

1、尴尬!雷州一高考生伪造清华录取通知书骗家长?最新消息来了

2、微信支持撤回拍一拍、删除朋友圈的评论 (ISO版本)

3、Python 教程/资料-01-简介

4、HTML5 教程/资料-01-简介和编辑器、编码介绍

5、jQuery 教程/资料-04-隐藏和显示、淡入淡出、滑动效果

6、jQuery 教程/资料-03-事件

7、国内首个！陈薇院士团队新冠疫苗获得专利

8、jQuery教程-01-介绍与安装

9、jQuery教程-02-语法与文档就绪事件

点分享点点赞点在看