关于jquery事件中被我忽视的一些用法

浏览数：18 / 时间：2015年06月09日

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

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

例子中的代码

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>

View Code

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;
        }

View Code

    $("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();
    });

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

关于jquery事件中被我忽视的一些用法