JQuery中解决重复动画的方法


Posted in Javascript onOctober 17, 2016

下面我们就来总结一下几个JQuery中解决重复动画的办法 ,这里有几个常见的动画效果,它们分别是:图片滚动轮播,回到页面顶部,联级菜单滑出,手风琴。

图片滚动:

$("#banner-min-img1").mouseover(function (){
$("#banner-img").animate({left:"0px"},300)}
$("#banner-min-img2").mouseover(function (){
 $("#banner-img").animate({left:"-1041px"},300)}
$("#banner-min-img3").mouseover(function (){
$("#banner-img").animate({left:"-1990px"},300)}

回到页面顶部:

$("#goBackTop").click(function (){
$("html,body").animate({scrollTop:0},1000)}

在实际操作中我们会发现,代码是非常简单的,就那么2、3行,但是其中的队列控制也让人不忍直视:

回到页面顶部,如果你连续点击回到页面顶部多次,那么短时间内你就再也没办法用滚动条了;

滚动轮播,你指向100次,他就会滚100次才停止!完全不顾及你的感受!

那么如何来解决呢?其实jquery内置了2种方法,一种是stop,一种是在对象后面加上is(:animated),推荐使用后面一种,用上之后,腰也不酸了,动画也听话了;代码

回到顶部,代码如下:

$("#goBackTop").click(function (){
  if(!$("html,body").is(":animated"))
     {$("html,body").animate({scrollTop:0},1000)}
})

最后奉上 最简洁的 手风琴代码,只有2行:

CSS:

<meta charset="utf-8">
  <style>
    .wrap{
      width: 400px;
      min-height: 550px!important;
      background: #000;
      display: block!important;
    }
    div{
      width: 400px;
      height: 200px;
      background: #faf8ff;
      display: none;
      overflow: hidden;
    }
    p{
      width: 400px;
      height: 50px;
      line-height:50px;
      background: #62f1f4;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      color: #777;
      font-size: 1.3em;
      font-style: italic;
      margin: 0;
      padding: 0;
    }
    .dis{
      display: block;
    }
  </style>

HTML:

<body>
<div class="wrap">
<p>Acc</p>
<div class="dis">大</div>
<p>click me</p>
<div>王</div>
<p>click me</p>
<div>派</div>
<p>click me</p>
<div>我</div>
<p>click me</p>
<div>来</div>
<p>click me</p>
<div>巡</div>
<p>click me</p>
<div>山</div>
</div>
</body>

jquery!

<script src="jquery1.9.1.js"></script>
<script>
  $("p").mousedown(function(){
    $(this).next("div").slideToggle();
    $(this).next("div").siblings("div").slideUp();
  });
</script>

希望本文所述对你有所帮助,JQuery中解决重复动画的办法内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习JQuery可以继续关注本站。

Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 #Javascript
原生JavaScript制作计算器
Oct 16 #Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 #Javascript
JavaScript正则表达式实例详解
Oct 16 #Javascript
js实现碰撞检测特效代码分享
Oct 16 #Javascript
js+css3制作时钟特效
Oct 16 #Javascript
js实现可旋转的立方体模型
Oct 16 #Javascript
You might like
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python创建和使用字典实例详解
2013/11/01 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
爱与责任演讲稿
2014/05/20 职场文书
运动员口号
2014/06/09 职场文书
推广活动策划方案
2014/08/23 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python