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

Question

i want to slide a div when user click on support button from right to left.i have tried the following code.. but its not working correctly for me...

<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 code is:

<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>

When we click on buttons first time.the div slides to left but when i click on button again i want to slide it to right and div will be hide. ...please help me...

Answer 1

I would handle it like this.

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

Also, remove display:none; from <div id="divSupport"> and give it a right:-270px; so it appears off the page. It's already hidden from sliding in, so no reason to be display:none; . here's a working jsFiddle showing an example .

Answer 2

I have added the following code and its worked for me.. but still i want if it possible to slide.. like fade in ,fade out..

My working code is:

<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

To move the div relative to where it currently is, set the 'marginLeft' property to a value += or -= the amount to move it by. The above examples effectively work like this:

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

and

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

Here's the full code for the example above which actually calls a function to animate the 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>

For more things to do with jquery Click here .