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

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

<!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. Little Kings - SGU 223（状态压缩）

    题目大意:在一个N*N的棋盘上放置M个国王,已知国王会攻击与它相邻的8个格子,要求放置的额国王不能相互攻击,求放置的方式有多少种. 分析:用dp[row][state][nOne],表示本行状态sta ...

  2. 转：实现Java Web程序的自动登录

    有很多Web程序中第一次登录后,在一定时间内(如2个小时)再次访问同一个Web程序时就无需再次登录,而是直接进入程序的主界面(仅限于本机).实现这个功能关键就是服务端要识别客户的身份.而用Cookie ...

  3. LINQ多条件OR模糊查询

    本文章转载:http://www.cnblogs.com/guyun/archive/2012/10/18/2729888.html 需求是这样的,有一张表tbl(Key[int],Value[str ...

  4. hdu 4742 Pinball Game 3D 分治+树状数组

    离散化x然后用树状数组解决,排序y然后分治解决,z在分治的时候排序解决. 具体:先对y排序,solve(l,r)分成solve(l,mid),solve(mid+1,r), 然后因为是按照y排序,所以 ...

  5. 【UVA】11732 - strcmp() Anyone?

    一開始不知道这样的一维建树方法. 每次一层用一个链指向下一层最左边的结点,之后每一层用一个链表串联全部的结点,这样就建树成功了. 14328524 11732 option=com_onlinejud ...

  6. Shell脚本编程——了解你的Linux系统必须掌握的20个命令

    要想详细了解你的Linux系统,为系统评估和性能调化提供准确的信息,那么,你会经常用到这几组命令. 一. 系统信息     1. 查看内核版本.编译主机.编译器版本和编译时间的信息    cat /p ...

  7. 执行游戏时出现0xc000007b错误的解决方法

    如图,这个错误使无数玩家烦恼. 出现这个错误,可能是硬件的问题,也可能是软件的问题.可是,因为硬件引起该问题的概率非常小,而且除了更换硬件之外没有更好的解决方法,因此本文将具体介绍怎样通过软件解决此问 ...

  8. lua字符匹配

    匹配下列格式的数据中的 source和MAC地址: Chain WiFiDog_br-lan_Outgoing (1 references) pkts bytes target prot opt in ...

  9. String是java中的基本数据类型吗

    1. 首先String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. Ja ...

  10. hadoop资料汇总（网上）

    http://blog.csdn.net/fansy1990/article/list/3      全部是hadoop的,挺好. http://stackoverflow.com/          ...