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

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

<!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. NGUI-学习笔记（2）一个项目需求

    using UnityEngine; using System.Collections; public class ins1 : MonoBehaviour { //bool isTarget = f ...

  2. SDN基础理解

    本文转载自:http://blog.csdn.net/freezgw1985/article/details/16873677 个人觉得对很适合对SDN的入门级的概念性理解,先暂时copy一下,等研究 ...

  3. top N彻底解秘

    本博文内容: 1.基础Top N算法实战 2.分组Top N算法实战 3.排序算法RangePartitioner内幕解密 1.基础Top N算法实战 Top N是排序,Take是直接拿出几个元素,没 ...

  4. Myeclipse Professional 2014使用软件获取激活码的方法(声明:破解仅仅是为个人使用Myeclipse,不作为商业获利.商业活动请购买正版软件)

    一下说明全部为网络来源,已经忘了原地址了,一直保留的是获取激活码用的软件和说明, 原著看见可联系(非常谢谢原作者): 获取激活码用的软件下载地址(个人百度云):http://pan.baidu.com ...

  5. Servlet实现表单提交（MyEclipse10,Tomcat7.0,JDK1.7,）——Java Web练习（一）

    1.MyEclipse|File|New|Project|Web Project    填写Project Name:exServlet,点选Java EE 6.0(配套Tomcat7.0) 2.代码 ...

  6. python_list和tuple互转

    Python中,tuple和list均为内置类型, 以list作为参数将tuple类初始化,将返回tuple类型 tuple([1,2,3,4]) list->tuple 以tuple做为参数, ...

  7. tableview: 实现tableview 的 section header 跟随tableview滑动

    方法一:(只有一个headerView)一段 如果你的tableview恰好只有一个headerView,实现这种效果就好办了.把要设置的headerView设置成tableView的header而不 ...

  8. myeclipse 解决没有自动提示

    有时候myeclipse误操作会丢失自动提示功能,使用.也不出现代码提示,进入window->preferences->java->Editor->Content Assist ...

  9. NIO设置SO_LINGER引发的异常

    欢迎关注Github:https://github.com/teaey/ ### 背景 银时跟我讲,想从 Netty3迁移到Netty4 . 问其原因是由于 Netty3在容器里会报错,错误堆栈: j ...

  10. Vim 程序编辑器 经常使用操作

    按下 i 进入编辑模式 wq! 强制保存并退出 q!  不保存,强制退出 !有强制的意思 方向键位: k h  j  l Ctrl + f 向下移动一页 Ctrl + b 向上移动一页 0 一行的开头 ...