详解jQuery如何实现动画与停止动画效果

发布时间：2020-07-21 10:46:05 来源：亿速云阅读：191 作者：小猪栏目：web开发

小编这次要给大家分享的是详解jQuery如何实现动画与停止动画效果，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

本文实例讲述了jQuery 动画与停止动画效果。分享给大家供大家参考，具体如下：

jQuery 动画 - animate() 方法

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

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：

$("button").click(function(){
 $("div").animate({left:'250px'});
});

jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

$("button").click(function(){
 $("div").animate({
  left:'250px',
  opacity:'0.5',
  height:'150px',
  width:'150px'
 });
});

lamp 可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。

jQuery animate() - 使用相对值

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

$("button").click(function(){
 $("div").animate({
  left:'250px',
  height:'+=150px',
  width:'+=150px'
 });
});

jQuery animate() - 使用预定义的值

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

$("button").click(function(){
 $("div").animate({
  height:'toggle'
 });
});

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

$("button").click(function(){
 var div=$("div");
 div.animate({height:'300px',opacity:'0.4'},"slow");
 div.animate({width:'300px',opacity:'0.8'},"slow");
 div.animate({height:'100px',opacity:'0.4'},"slow");
 div.animate({width:'100px',opacity:'0.8'},"slow");
});

下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

$("button").click(function(){
 var div=$("div");
 div.animate({left:'100px'},"slow");
 div.animate({fontSize:'3em'},"slow");
});

jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施

Queue队列

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

为什么要引入队列

var a = 1;
setTimeout(function(){
　　a=2;
},0)
alert(a);

我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：

setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。

看一个代码段：

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列，它的内部其实就是一组队列 Queue，所以队列和 Deferred 地位类似，是一个内部使用的基础设施。

当 slideUp 运行时，fadeIn 被放到 fx 队列中
当 slideUp 完成后，从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为，同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API：

jQuery.queue/dequeue
jQuery.fn.queue/dequeue

但是不同与普通队列定义的是：

jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素，还会自动执行返回的队头元素
fn 是扩展在原型上的高级API是提供给实例使用的
.queue/.dequeue 其内部是调用的 .queue，.dequeue 静态的底层方法实现入列与出列

jQuery stop() 方法

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

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

语法:

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

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

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

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

$("#stop").click(function(){
 $("#panel").stop();
});

动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：

$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown(5000);
  $("#panel").slideUp(5000);
 });
 $("#stop").click(function(){
  $("#panel").stop();
 });
});

可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：

$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown(5000);
  $("#panel").slideUp(5000);
 });
 $("#stop").click(function(){
  $("#panel").stop(true);
 });
});

看完这篇关于详解jQuery如何实现动画与停止动画效果的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。

向AI问一下细节