您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
JQuery中stop方法的使用
2018-07-16【网站建设常见问答】1853 人已围观
简介在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用JQuery中的动画来实现便显得非常的简单。最近在工作中碰到了一个页面元素移动的效果,这是个简单的...
在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用JQuery中的动画来实现便显得非常的简单。
最近在工作中碰到了一个页面元素移动的效果,这是个简单的页面效果也非常容易实现。
在使用中用到了一个停止动画的方法"stop()",以前只是用也没有过多的关注。
这几天再次碰到,便翻开文档测试了一番,竟也有了一些新的认识。对这个方法有了全新的了解,在这里把我的测试记录下来。
在JQuery文档中对这个方法的解释是这样的:
一、概述
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行。
二、没有参数
场景模拟
假设有一个元素需要在背景中进行移动,然后回到起始位置。页面中有三个按钮,分别负责“开始移动”,“采用了stop方法的回归”,“没有采用stop方法的回归”。
通过测试我们不难发现
有stop,当蓝色方块在向右侧移动的时候,点击按钮,方块会立即往回返(向左侧移动)。
没有stop,当蓝色方块在向右侧移动的时候,点击按钮,方块会等到完全移动到指定位置后才往回返(向左侧移动)。
测试总结
stop()停止了当前正在执行的动画,并使后续的动画立即得到了执行。
三、两个参数或者一个参数
查看文档可以知道这个时候参数依次为:[clearQueue],[gotoEnd] 并且都为可选,类型都为Boolean。
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
我们可以看到如下整理结果 这是重点哦
方法 参数 说明 方法 参数 说明
stop() 清空队列,当前执行动作立即停止。后续动作会不再执行。 等同于:stop(false,false)
stop(true) [clearQueue] 清空队列,当前执行动作立即停止。后续动作会不再执行。
stop(false) [clearQueue] 不清空队列,当前执行动作立即停止。后续动作会立即执行。
stop(true,true) [clearQueue],[gotoEnd] 清空队列,当前执行动作立即完成。后续动作会不再执行。
stop(false,true) [clearQueue],[gotoEnd] 不清空队列,当前执行动作立即完成。后续动作会立即执行。
stop(true,false) [clearQueue],[gotoEnd] 清空队列,当前执行动作立即停止。后续动作会不再执行。
stop(false,false) [clearQueue],[gotoEnd] 不清空队列,当前执行动作立即停止。后续动作会立即执行。
四、笔记
在jQuery的较高版本中stop还有一种用法,就是和队列(queue)配合使用。对于这种用法,我目前还不是还不是属性,这里无法给出一个好的解释。
留待以后在慢慢研究了。
目前stop的用法相信也足够我们只用了。
关注宁波网站建设博客,更多精彩分享,敬请期待!
Tags:
很赞哦! ()
下一篇:如何选择国外服务器?
相关文章
随机图文
分析博客类网站的没落原因
曾几何时,blog是一个很火的程序。各方路人纷纷搭建平台架设自己的博客程序,时至今日博客却越来越少见,博客更新内容越来越慢这是什么原因呢?...linux服务器一站多域名配置apache
在一台Linux服务器下我们一般都会放多个网站,这样我们就要在建立虚拟目录。有时一个网站也需要绑定多个域名,那么我们就需要配置虚拟。...殷雯jquery笔记:添加HTML元素
使用jQuery可以方便的添加新的HTML元素。这样就允许在客户端浏览器里进行一些动态操作,丰富了使用者体验。 下面的方法用于添加HTML...百度搜索的彩蛋!
今天无意搜索“翻转”,结果百度出来了让我惊讶的效果哈,各位不妨也试试!是的我的浏览器跟着也旋转了! 赶紧再查,原来百度从很早推出 ...