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

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

<!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. Bzoj 2818: Gcd 莫比乌斯,分块,欧拉函数,线性筛

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 3241  Solved: 1437[Submit][Status][Discuss ...

  2. Java 集合框架 ArrayList 源码剖析

    总体介绍 ArrayList实现了List接口,是顺序容器,即元素存放的数据与放进去的顺序相同,允许放入null元素,底层通过数组实现.除该类未实现同步外,其余跟Vector大致相同.每个ArrayL ...

  3. svn操作

    1.已经被svn管理的文件的复制.删除.重命名都要通过svn的命令来操作(在资源管理器中通过鼠标右键来完成)(复制粘贴可以通过右键按下移动来实现) 2.没有被svn管理的文件(没有被上传过的文件,没有 ...

  4. Magento网站迁移指南

    "Magento网站迁移指南":关键词:magento 网站 迁移 指南 上周五,为mkt同事迁移了一个从本机到godaddy的magento系统. 中间出了不少状况, 现在写个迁 ...

  5. TreeComboBox控件范例

    本文转载:http://www.cnblogs.com/hoodlum1980/archive/2008/01/30/1058140.html 在我印象中有很多各种各样的自定义控件(例如TreeLis ...

  6. 实现html转Xml

    最近在做一些网页信息采集的工作,说通俗点就是爬虫工具,要监控页面中某一部分内容是否发生变化.起初考虑用正则表达式去匹配网页源码,经过咨询有经验人士,推荐使用xpath去获取页面内容能获得更好的效率.但 ...

  7. golang 学习笔记

    golan 声明的变量必须要用到? 语法 a,b:=2323; b为 bool 类型 结构体的赋值 需要用到逗号分隔字段 并且最后一个字段后也必须加上逗号 这和 JavaScript 的对象不一样哦 ...

  8. OSChina 的全文搜索设计说明 —— 索引过程

    http://www.oschina.net/question/12_71591 言: OSChina 的搜索做得并不好,很久之前一直想在细节方面进行改造,一直也没什么好的思路.但作为整体的结构或许对 ...

  9. ARCGIS二维三维放大缩小

    private void ULZoomPan() { ESRI.ArcGIS.SystemUI.ICommand com = new ControlsGlobeFixedZoomOutCommand( ...

  10. Android进阶笔记03：Android应用中实现查看"附近的人"的功能

    1. 要实现" 附近的人" 这功能,然后就研究了下: (1)首先要做的就是要获取到自己当前位置的经纬度(编程获取手机GPS定位模块的信息,进而获取自己当前位置的经纬度) (2)然后 ...