Prevent Multiple click for single action in jquery !
<p>i have this javascript code : </p>

<pre><code>var next = jQuery('#next') ;
     var prev = jQuery('#prev') ;
     var Scroller = jQuery('#Scroller') ;
     var ScrollerTable = Scroller.children('table').width() ; 
     next.click(function(){
     console.log('width of scroller table ' + ScrollerTable) ;
       var offsetLeft = parseInt(Scroller.css("left")) ;
       console.warn(offsetLeft) ;
       if(offsetLeft == 0)
       {
        Scroller.animate({left : -140 } , 1000 ) ;
       }else{
        console.warn(offsetLeft) ;
        if(ScrollerTable &lt;= offsetLeft  )
        {
         console.warn(offsetLeft) ;
         alert('you are reached the end of scroller use the other btn') ;
         return false ;
        }else{
         Scroller.animate({left : offsetLeft-140 } , 1000) ;
        }
       }

     });
     prev.click(function(){

       var offsetLeft = parseInt(Scroller.css("left")) ;
       console.warn('offsetLeft in backward ' + offsetLeft) ;
       if(offsetLeft != 0 || offsetLeft &gt; 0 )
       {
        Scroller.animate({left : offsetLeft +140 } , 1000 ) ;
       }else{
        jQuery(this).css('cursor' , 'none') ;
        return false ;
       }
     });
</code></pre>

<p>when user click on next or perv multiple animation will not completely complete and offsetLeft value is not correct ! what can i do to prevent that </p>

<p>my second question is when user click on next btn the scroller div scrolled to -140px left this action must iterate until to reach to end of slides then i must disable the next btn . so i get scrollerTable width in a variable and check it with offsetLeft Value but it's not working ! </p>

<p>and here is html </p>

<pre><code>&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
      &lt;tr&gt;
        &lt;td&gt;
        &lt;div style="border:#ccc 1px solid ; padding:1px" class="scroll"&gt;
            &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
              &lt;tr&gt;
                &lt;td width="2%"&gt;&lt;img src="../images/dum/scroll_left.gif" width="20" height="165" id="prev" style="cursor:pointer" /&gt;&lt;/td&gt;
                &lt;td width="96%" valign="top"&gt;
                    &lt;div style="width:720px; height:165px ;  position:relative ; overflow:hidden " id="Container"&gt;
                        &lt;div style="position:absolute ; left:0" id="Scroller"&gt;
                            &lt;table cellpadding="0" cellspacing="0" border="0"&gt;
                                &lt;tr&gt;
                                    {foreach from=$products item=p}
                                        &lt;td&gt;
                                            &lt;div style="border:#ccc 2px solid ; padding:0px;margin:20px;"&gt;
                                                &lt;img src="imgsize.php?w=100&amp;h=100&amp;img=../uploads/product/{$p.xproductid}.jpg" /&gt;
                                                &lt;div style="background-color:#ccc ;text-align:center ; padding:5px; "&gt;{$p.xproductname}&lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;/td&gt;    
                                    {/foreach}
                                &lt;/tr&gt;
                            &lt;/table&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/td&gt;
                &lt;td width="2%"&gt;&lt;img src="../images/dum/scroll_right.gif" width="20" height="165" id="next"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
</code></pre>
