javascript - 如何使用 jquery 或 javascript 单击按钮时向右滑动 div？

Question

当用户从右向左单击支持按钮时，我想滑动一个div。我尝试了以下代码..但它对我来说无法正常工作...

<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);
    });
});​

此外，删除 display:none;来自<div id="divSupport">并给它一个 right:-270px;所以它出现在页面之外。它已经无法滑入，所以没有理由 display:none; 。 here's a working jsFiddle showing an example .