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

【问题标题】：how to slide div right while on click a button using jquery or javascript?如何在使用 jquery 或 javascript 单击按钮时向右滑动 div？
【发布时间】：2012-11-19 15:19:55
【问题描述】：

当用户从右到左单击支持按钮时，我想滑动一个 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 将被隐藏。 ...请帮助我...

【问题讨论】：

标签： javascript jquery asp.net html jquery-animate

【解决方案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.

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

要相对于当前位置移动 div，请将 'marginLeft' property 设置为值 += 或 -= 移动量。上面的例子可以像这样有效地工作：

$('#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。

【讨论】：