Question

我想点击它来移动div。我就像

那样为div做动画

<head>
    <title>Title</title>

     <style type="text/css" media="screen">
        .slide-out-div {
            position:relative;
            background: none repeat scroll 0 0 #F2F2F2;
            border: 2px solid #29216D;
            color: #666666;
            font-size: 14px;
            padding: 20px;
            width: 250px;
            left: -210px; }
    </style>
</head>
<body>
     <div class="slide-out-div">
         <form>
             <a class="handle" href="http://link-for-non-js-users">SEARCH</a>
             <button id="myButton" type="submit" />
         </form>
     </div>
</body>

这是脚本

$(document).ready(function(){
    var visible = 0;
    $(".slide-out-div").click(function() {
        var $div = $(this);
        if (visible == 0) {
            $div.animate({left: "10px"}, "slow");
            visible = 1;
        } else {
            $div.animate({left: "-210px"}, "slow");
            visible = 0;
        }      
    });
}); //end of  $(document).ready(fn)

首先我想问的是我的脚本好吗？它有效，但并不意味着它有效。第二，当它来自或离开时，如果用户多次点击，那么我认为动画进入动画队列，我的div持续动画。我希望当用户第一次点击时动画运行。多次点击不会运行。如何防止用户多次点击？

谢谢。

Answer 1

您可以使用.stop()函数结束当前动画，然后在每次后续点击时开始新动画。这不会阻止多次点击，但可用于防止多个排队的动画。

或者，您可以使用:animated selector检查该元素当前是否已设置动画，并且只有在这种情况下才会生成动画。

$(".slide-out-div").click(function() {
    var $div = $(this);
    if(!$div.is(':animated')) {
        if (visible == 0) {
            $div.animate({left: "10px"}, "slow");
            visible = 1;
        } else {
            $div.animate({left: "-210px"}, "slow");
            visible = 0;
        }      
    }
});

Answer 2

一种方法是保持锁定动画，以下应该工作

$(document).ready(function(){
    var blockAnimation = false;
    var visible = 0;
    $(".slide-out-div").click(function() {
      if(blockAnimation != true){
        blockAnimation = true;
        var $div = $(this);
        if (visible == 0) {
            $div.animate({left: "10px"}, "slow");
            visible = 1;
        } else {
            $div.animate({left: "-210px"}, "slow");
            visible = 0;
        }  
       }    
    });
});

Answer 3

一种可能的简短解决方案：

$(".slide-out-div").click(function() {
    var $div = $(this);
    $div.not(":animated").animate({
        left: $div.position().left == -210 ? 10 : -210
    }, "slow");
});

DEMO： http://jsfiddle.net/rXW9D/

如何防止div in-out动画中的多次点击

3 个答案: