您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
JQuery中stop方法的使用
2018-07-16【网站建设常见问答】1740 人已围观
简介在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用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:
很赞哦! ()
下一篇:如何选择国外服务器?
相关文章
随机图文
不对称设计在网站建设中使用
不对称设计技术可以非常直观有趣和创建不同的焦点。 不对称仅仅是缺乏对称性,但不对称并没有缺乏平衡与和谐。 不对称和对称的设计都可以创...网站建设开始之域名的选择
在建设网站的时候,我们会面临很多的问题。比较常见的就是域名的选择。今天小编就来教教大家,如何选择一个好的域名。 现在网络营销已经成为了...怎么设计一个漂亮的企业网站
打开一个网站第一眼就是他的门面,给客户的第一感觉,这很重要,为将来促成交易做下一个基础。那怎么样做一个漂亮的企业网站呢?那第一眼就很重要...网站建设的最终目的
为什么我们要做网站呢?这个问题拿今天来说应该是相当简单来回答的。 众所周知,做网站不在乎做网站的外表(外表是做给自己看) 看中的是...