您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
JQuery中stop方法的使用
2018-07-16【网站建设常见问答】1741 人已围观
简介在前台页面开发中有时候我们会需要一些比较酷的效果,这个时候使用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:
很赞哦! ()
下一篇:如何选择国外服务器?
相关文章
随机图文
PHP对图像操作GetImageSize函数详解
取得图片的长宽。语法: array getimagesize(string filename, array [imageinfo]); 返...PSD切片的CSS和布局经验与要点
做网站特别是前台呈现的美工在刚学完CSS基础要去实际操作进行网页切图的时候,总感觉无从下手。在这里我为大家简单总结一下,一些网页切图的经验...建站过程中网站服务器稳定与否与百度之间的关系
我们的公司企业在做好网站后,都需要放置到服务器上以供网络上的用户随时可以访问,这时就会有服务器稳定性的问题。如果企业网站放在了不稳定的机房...不对称设计在网站建设中使用
不对称设计技术可以非常直观有趣和创建不同的焦点。 不对称仅仅是缺乏对称性,但不对称并没有缺乏平衡与和谐。 不对称和对称的设计都可以创...