jquery动画效果中，避免持续反应用户的连续点击

时间：2024-10-21 13:06:02

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

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

<!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()可停止所选元素上的动画效果，元素保持调用此句之前的状态。）

相关文章