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

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

要将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的更多信息。

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

3 个答案: