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

1 つの方法は、アニメーション化のためにロックを維持することです。

$(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

考えられる短い解決策の 1 つ:

$(".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 に答える