如何在使用jquery或javascript單擊按鈕時滑動div的權利？

Question

我想滑動一個div當從右到left.i支持按鈕用戶點擊已經嘗試下面的代碼..但它不是爲我工作正常...

<script type="text/javascript"> 

$(document).ready(function() { 
    $('[id$=aSupport]').live('click', function (e) { 

     if ($('[id$=hdfsupportcount]').val() == 1) { 
      $('[id$=hdfsupportcount]').val(0); 

      $('[id$=divSupport]').css({ 'right': '' }).animate({ 
       'left': '0px' 
      }); 
      // $('[id$=divSupport]').css('display', 'none'); 
     } else { 
      $('[id$=hdfsupportcount]').val(1); 

      $('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({ 
       'right': '30px' 
      }); 
      $('[id$=divSupport]').css('display', 'block'); 
     } 
    }); 
}); 
</script> 

HTML代碼：

<div> 
    <asp:HiddenField ID="hdfsupportcount" runat="server" /> 
    <div style="float: right; position: fixed; top: 35%; right: -3px;"> 
     <a href="javascript:void(0);" class="signin" title="Support" id="aSupport"> 
      <img src="support_button2.png" /></a> 
    </div> 
    <div id="divSupport" style="height: 500px; width: 270px; float: right; position: fixed; 
     top: 35%; right: 21px; display: none;"> 
     <div id="ContactMenu"> 
      <div id="topnav" class="topnav"> 
      </div> 
      <div id="signin_menu"> 
       <div id="signin"> 
        <div style="width: 100%; font-weight: bold; font-size: 22px; color: Black;"> 
         <div style="width: 27px; float: left"> 
         </div> 
         <div style="float: left; margin-top: 1px"> 
          123-456-7890</div> 
        </div> 
        <br clear="all" /> 
        <br /> 
        <p> 
         <label style="font-weight: bold; color: Black"> 
          Contact Us</label> 
        </p> 
        <p> 
         <label> 
          Email</label> 
         <asp:TextBox ID="txtContactEmail" runat="server"></asp:TextBox> 
        </p> 
        <p> 
         <label> 
          Message</label> 
         <asp:TextBox ID="txtMessage" TextMode="MultiLine" runat="server"></asp:TextBox> 
        </p> 
        <asp:Button ID="btnContactUs" CssClass="signin_submit" runat="server" Text="Send" 
         ValidationGroup="ContactUS" OnClick="btnContactUs_Click" /> 
        <asp:Button ID="btnContactUsCancel" CssClass="signin_submit" runat="server" Text="Cancel" 
         OnClick="btnContactUsCancel_Click" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

當我們第一次點擊按鈕時，div滑動到左側，但是當我再次點擊按鈕時，我想將它滑動到右側，div將被隱藏。 ......請幫我...

Answer 1

我會處理這件事是這樣的。

$(function(){ 
    $(document).on('click', '[id$=aSupport]', function (e) { 
     var dist = 0, 
      count = $('[id$=hdfsupportcount]'), 
      support = $('[id$=divSupport]'); 
     switch(count.val()){ 
      case '0': 
        count.val(1); 
        dist = 30; 
       break; 
      case '1': 
        count.val(0); 
        dist = -300; 
       break; 
     }  
     support.stop().animate({ 
      right: dist 
     }, 500); 
    }); 
});​ 

此外，從<div id="divSupport">刪除display:none;，並給它一個right:-270px;所以會出現掉頁。它已經隱藏起來了，所以沒有理由成爲display:none;。 here's a working jsFiddle showing an example。

Answer 2

我已經添加下面的代碼和它的工作對我來說..但還是我想，如果有可能滑入..如淡入，淡出..

我的工作代碼爲：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('[id$=aSupport]').live('click', function (e) { 

      if ($('[id$=hdfsupportcount]').val() == 1) { 
       $('[id$=hdfsupportcount]').val(0); 

       $('[id$=divSupport]').css({ 'right': '-27%' }).animate({ 
        'right': '-27%' 
       }); 
       // $('[id$=divSupport]').css('display', 'none'); 
      } else { 
       $('[id$=hdfsupportcount]').val(1); 

       $('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({ 
        'right': '30px' 
       }); 
       $('[id$=divSupport]').css('display', 'block'); 
      } 
     }); 
    }); 

</script> 

Answer 3

要移動相對於目前它就是，'marginLeft' property設置爲一個值+ =或在div - =量由移動它。在上面的例子中有效地工作是這樣的：

$('#example').animate({ 
    'marginLeft' : "+=50px" 
}); 

和

$('#example').animate({ 
    'marginLeft' : "-=50px" 
}); 

下面是上面這實際上調用一個函數，以動畫的div的例子的完整代碼。

<script language="javascript"> 
function example_animate(px) { 
    $('#example').animate({ 
     'marginLeft' : px 
    }); 
} 
</script> 
<input type="button" value="Move Left" onclick="example_animate('-=50px')" /> 
<input type="button" value="Move Right" onclick="example_animate('+=50px')" /> 
<div id="example" style="border: 1px solid black; margin: 10px 0px; padding: 10px; background-color: rgb(238, 238, 238); width: 200px; text-align: center;">This is going to move</div> 

更多的事情要做的jQuery Click here。