How to prevent multiple clicks in div in-out animation
<p>I want to move div in and out on click of it. I just animate the div like</p>

<pre><code>&lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;

     &lt;style type="text/css" media="screen"&gt;
        .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; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
     &lt;div class="slide-out-div"&gt;
         &lt;form&gt;
             &lt;a class="handle" href="http://link-for-non-js-users"&gt;SEARCH&lt;/a&gt;
             &lt;button id="myButton" type="submit" /&gt;
         &lt;/form&gt;
     &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Here is the script</p>

<pre><code>$(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)
</code></pre>

<p>First i want to ask is my script ok? It is working but it doesn't mean it is efficient. Second when it is coming to or gone from then if user clicks on multiple times then i think the animation goes to animation queue and my div continuously animate.
I want that when user click on first time then the animation runs. Multiple clicks don't run. How can i prevent user multiple clicks?</p>

<p>Thank you.</p>
