`

jQuery的stop()方法回顾总结

阅读更多

【前言】

      在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用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()停止了当前正在执行的动画,并使后续的动画立即得到了执行。

 

 

 

 

.

  • 大小: 38.2 KB
分享到:
评论

相关推荐

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    - **jQuery对象**:使用`$()`函数选择的元素集合,可以执行jQuery特有的方法。 - **DOM对象**:原生JavaScript中的DOM元素,只能使用DOM API操作。 转换关系: - DOM对象转jQuery对象:`$(domElement)`。 - ...

    JavaScript 与 JQuery 的方法总结

    JavaScript 与 JQuery 的方法总结

    jquery总结学习资料JQuery总结

    **jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...

    JQuery学习总结及实例中文WORD版

    资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    JQuery个人总结(很全面)

    目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果

    JQuery教程自学笔记总结

    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。 首先,jQuery的核心特性包括选择器、DOM操作和事件处理。选择器类似于CSS,但...

    Jquery全集,Jquery总结

    **jQuery 全集与总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。自2006年发布以来,jQuery 已经成为了前端开发中不可或缺的一部分,因其简洁的API和...

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    JqueryApi Jquery实例 Jquery归纳 Jquery学习方法

    这个资源 可以使你全面的掌握 JQuery,里面有我告诉你如何学习Jquery如何使用Jquery,里面还有Jquery的例子,还有Jquery的拓展UI,很好很强大的!!!这绝对是我精心压缩的一个资源,如果没学会,可以给我留言,然后...

    jquery_validate插件总结

    这是一个关于jquery_validate插件学习的总结,内容不多,但是都是干货,有兴趣的可以看一下。

    Jquery 的扩展方法总结

     // jQuery 所选对象扩展方法 二、调用示例: 1.jQuery 本身的扩展方法实例如下: 代码如下: jQuery.extend({ Meg: function (message) { alert(message); }, MegToo: function (messageToo) { alert(...

    jquery 导出excel方法

    总结,jQuery导出Excel的方法多样,可以选择适合项目需求的技术栈。TableExport插件是一个便捷的选择,而对于更复杂的需求,可以结合其他JavaScript库和服务器端技术来实现。在实际应用中,还需要关注兼容性、性能和...

    JQuery动画animate的stop方法使用详解

    在实际应用中,我们可能需要控制动画的执行,这时JQuery的stop方法就显得尤为重要。stop方法允许我们中断正在运行的动画,它有多个可选参数: ```javascript $(selector).stop([clearQueue], [jumpToEnd]); ``` - ...

    jquery总结 Js总结 PHP与jquery

    **jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...

    Jquery 常用方法经典总结

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom...

Global site tag (gtag.js) - Google Analytics