【前言】
在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用JQuery中的动画来实现便显得非常的简单。最近在工作中用到了一个停止动画的方法"stop()",以前只是用也没有过多的关注。
这几天再次碰到,便翻开文档测试了一番,也有了一些新的认识。对这个方法有了全新的了解,在这里把我的测试记录下来。
【主体】
(1)官方文档解释:
在JQuery文档中对这个方法的解释是这样的:
停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行。这个怎么理解呢?
(2)应用案例解析:
常用的一个效果,二级下拉菜单→当鼠标滑过时显示二级菜单,但是鼠标移走时,二级菜单一般都是先显示完再上滑回去。这时我们可以用stop()方法来控制元素,当鼠标移走时,即使二级菜单只滑动到一半,接下来可以让它停止下滑,直接上滑。这样用户体验度更好,也很好解决了slideDown()和slideUp()反复执行的问题。
(3)stop()方法解析:
stop([clearQueue],[jumpToEnd]); clearQueue:如果设置成true,则清空队列,可以立即结束动画。 jumpToEnd:如果设置成true,则完成队列,可以立即完成动画。可选,默认是false
(4)参数解析:
查看文档可以知道这个时候参数依次为:[clearQueue],[gotoEnd] 并且都为可选,类型都为Boolean。
①clearQueue:如果设置成true,则清空队列。可以立即结束动画。
②gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
(5)场景模拟:
假设有一个元素需要在背景中进行移动,然后回到起始位置。页面中有三个按钮,分别负责“开始移动”,“采用了stop方法的回归”,“没有采用stop方法的回归”。
整体页面效果图如下:
测试结果:
通过测试我们不难发现
①有stop,当蓝色方块在向右侧移动的时候,点击按钮,方块会立即往回返(向左侧移动)。
②没有stop,当蓝色方块在向右侧移动的时候,点击按钮,方块会等到完全移动到指定位置后才往回返(向左侧移动)。
测试总结:
stop()停止了当前正在执行的动画,并使后续的动画立即得到了执行。
.
相关推荐
- **jQuery对象**:使用`$()`函数选择的元素集合,可以执行jQuery特有的方法。 - **DOM对象**:原生JavaScript中的DOM元素,只能使用DOM API操作。 转换关系: - DOM对象转jQuery对象:`$(domElement)`。 - ...
JavaScript 与 JQuery 的方法总结
**jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...
资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果
JQuery教程自学笔记总结 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 ...
这篇"jquery三年经验总结"旨在分享作者在使用jQuery过程中积累的知识和经验,帮助初学者或有一定基础的开发者更好地理解和运用jQuery。 首先,jQuery的核心特性包括选择器、DOM操作和事件处理。选择器类似于CSS,但...
**jQuery 全集与总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。自2006年发布以来,jQuery 已经成为了前端开发中不可或缺的一部分,因其简洁的API和...
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
这个资源 可以使你全面的掌握 JQuery,里面有我告诉你如何学习Jquery如何使用Jquery,里面还有Jquery的例子,还有Jquery的拓展UI,很好很强大的!!!这绝对是我精心压缩的一个资源,如果没学会,可以给我留言,然后...
这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。
// jQuery 所选对象扩展方法 二、调用示例: 1.jQuery 本身的扩展方法实例如下: 代码如下: jQuery.extend({ Meg: function (message) { alert(message); }, MegToo: function (messageToo) { alert(...
在实际应用中,我们可能需要控制动画的执行,这时JQuery的stop方法就显得尤为重要。stop方法允许我们中断正在运行的动画,它有多个可选参数: ```javascript $(selector).stop([clearQueue], [jumpToEnd]); ``` - ...
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom...
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有...
我们都晓得,在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法。那么,stop()怎么用呢?来带大家先认识一下stop()吧: stop()在语法上有两个参数,分别都是Boolean布尔值...