一、某些动画效果中，避免持续连续反应用户的连续点击（这标题真不好描述）

　　意思就是指用户点击速度很快，完成一次效果的时间不能很快结束的话，就会出现用户不点击了，效果还在持续。看下面例子就明白了，手风琴效果，短时间内多次点击的话，你就会发现问题了。（其实算是转载，在别人博客看到了，忘记是哪了）

<!DOCTYPE html>
<html>
<style type="text/css">
.wrap{
width: 40%;
margin:0 auto;
}
.content{
height: 200px;
background: #94D0D1;
display: none;
overflow: hidden;
}
p{
height: 30px;
line-height:30px;
background: #62f1f4;
cursor: pointer;
border-bottom: 1px solid #eee;
color: #777;
font-size: 1.3em;
margin: 0;
padding: 0;
}
.dis{
display: block;
}
</style>
<div class="wrap">
<p>click me</p>
<div class="content">大</div>
<p>click me</p>
<div class="content">王</div>
<p>click me</p>
<div class="content">派</div>
<p>click me</p>
<div class="content">我</div>
<p>click me</p>
<div class="content">来</div>
<p>click me</p>
<div class="content">巡</div>
<p>click me</p>
<div class="content">山</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(function(){
$("p").mousedown(function(){
$(this).next("div").slideToggle();
$(this).next("div").siblings("div").slideUp();
});
})
</script> </html>

运行代码

例子中的代码

HTML:

<div class="wrap">

    <p>click me</p>

    <div class='content'>大</div>

    <p>click me</p>

    <div class='content'>王</div>

    <p>click me</p>

    <div class='content'>派</div>

    <p>click me</p>

    <div class='content'>我</div>

    <p>click me</p>

    <div class='content'>来</div>

    <p>click me</p>

    <div class='content'>巡</div>

    <p>click me</p>

    <div class='content'>山</div>

</div>

CSS:

        .wrap{

            width: 40%;

            margin:0 auto;

        }

        .content{

            height: 200px;

            background: #94D0D1;

            display: none;

            overflow: hidden;

        }

        p{

            height: 30px;

            line-height:30px;

            background: #62f1f4;

            cursor: pointer;

            border-bottom: 1px solid #eee;

            color: #777;

            font-size: 1.3em;

            margin:;

            padding:;

        }

        .dis{

            display: block;

        }

JS:

    $("p").mousedown(function(){

            $(this).next("div").slideToggle();

            $(this).next("div").siblings("div").slideUp();

    });

　　解决办法：jquery中的:animated可匹配所有正在执行动画效果的元素，所有可以用.is(":animated")或.not(":animated")(此not用法错误，jquery中并没有)进行判断后再执行效果或直接只对非动画进行中的元素执行动画效果，如$("div:not(:animated)").animate({ left: "+=20" }, 1000);，当然也可以用于jquery其他定义好了的动画效果。

点此查看改善后的效果

  $("p").mousedown(function(){

         $(this).next("div:not(:animated)").slideToggle();

     $(this).next("div:not(:animated)").siblings("div").slideUp();

    });

（注：.stop()可停止所选元素上的动画效果，元素保持调用此句之前的状态。）

jquery动画效果中，避免持续反应用户的连续点击的更多相关文章

  1. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  2. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  3. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  4. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  5. 40个超酷的jQuery动画效果教程

    自从出现,jQuery就在web领域就引起了轰动,现在它已经成为Web动画效果的最佳解决方案之一.jQuery提供了良好的交叉浏览器支持,并且轻便易用.现在,jQuery在定义和控制小型的Web动画诸 ...

  6. jquery 动画效果插件

    从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...

  7. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  8. 一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏

    jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...

  9. Jquery——动画效果

    jquery中常用的动画的方法就是hide()与show(). $(element).hide()这段代码可以与这相等element.css("display","non ...

随机推荐

  1. mac下的改装人生——关于机械键盘

    这几天好像弄了很多关于机械键盘的东西,我自己的这块键盘也已经慢慢熟悉了,感觉打字超级爽哈,然后看了很多网上关于机械键盘的帖子,也看了很多教程,在Amazon和Taobao看了很多键盘的价位,前几天还试 ...

  2. poj 1328 Radar Installation【贪心区间选点】

    Radar Installation Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) ...

  3. HTML5 Security Cheatsheet使用说明

    1.URL: https://html5sec.org/ 2.通过点击如图button(也可点击其他:xss firefox)那行的button可以搜索所有button的Cheatsheet,查看都有 ...

  4. springmvc报错 org.springframework.web.servlet.DispatcherServlet

    在写springMVC时,导入所有需要的包后,运行程序,控制台报以下错误: 严重: Servlet [springDispatcherServlet] in web application [/Spr ...

  5. css3图片滤镜

    http://www.zhanxin.info/development/2012-12-19-css-filter.html

  6. 找出Active Directory架构操作主机方法！

  7. 基于XMPP实现的Openfire的配置安装+Android客户端的实现

    最近在整理一些这方面的资料,闲话少说,咱还是直奔主题吧 :) 一.基于xmpp实现的openfire的配置安装 1. 下载最新的openfire安装文件 官方下载站点: http://www.igni ...

  8. MapReduce实战：统计不同工作年限的薪资水平

    1.薪资数据集 我们要写一个薪资统计程序,统计数据来自于互联网招聘hadoop岗位的招聘网站,这些数据是按照记录方式存储的,因此非常适合使用 MapReduce 程序来统计. 2.数据格式 我们使用的 ...

  9. mac tips

    1. Mac Terminal color for different types 在 ~ 先建立一个文件  ~/.bash_profile 加入下面的两行:export CLICOLOR=1expo ...

  10. 'Service' object has no attribute 'process'

    在使用selenium+phantomjs时,运行总是出现错误信息: 'Service' object has no attribute 'process' 出现该错误的原因是未能找到可执行程序&qu ...