jQuery 效果2

jQury 效果2

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： MVC jQuery

作者：超级凶鸭.

撰写时间：2021/7/7

1. 效果 - 动画

animate()

Animate() 方法用于创建自定义动画。

语法：$(selector).animate({params},speed,callback)；

参数：

params：必填，定义形成动画的 CSS 属性。

speed：可选，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

callback：可选，动画完成后所执行的函数名称。

操作：写好代码，预览，点击页面上按钮的执行动画即可。

例如：

注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、 fixed 或 absolute！ l

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

animate()目前不支持颜色动画，如果需要生成颜色动画，需要引入颜色动画的插件。

Animate()使用相对值

也可以定义相对值 （该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

操作一样

例如：

Animate()使用预定义的值

可以把属性的动画值设置为"show"、"hide" 或 "toggle"

操作一样

例如：

Animate()使用队列功能

可以编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

操作一样

例如：

2.jQuery效果 - 停止动画 stop()

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

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

语法：$(selector).stop(stopAll,goToEnd);

参数：

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

goToEnd：可选，规定是否立即完成当前动画。默认是false。

操作一样

例如：

3.jQuery - 链

通过 jQuery，可以把动作/方法链接在一起。链允许我们在一条语句中运行多个jQuery 方法 （在相同的元素上）。

在这之前，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。

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

操作一样

例如：