0

我想通过单击将 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 会连续动画。我希望当用户第一次点击然后动画运行。多次点击不运行。如何防止用户多次点击？

谢谢你。

4

3 回答 3

1

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

或者，您可以使用:animated选择器来检查元素当前没有被动画化，并且只有在这种情况下才动画化。

$(".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;
        }      
    }
});
于 2012-10-05T09:15:02.370 回答
0

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

$(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;
        }  
       }    
    });
});
于 2012-10-05T09:17:16.583 回答
0

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

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

演示：http: //jsfiddle.net/rXW9D/

于 2012-10-05T09:17:37.767 回答