SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with simple slide down animation for login box.

    Hi,

    I am trying to add a simple slide down login effect for my panel.

    At the moment it is simply a button that when clicked makes a form appear for logging in. I would like to make it slide down / bounce or do something a bit slicker.



    Here is the login.js file that is called:

    Code:
    $(function() {
        var button = $('#loginButton');
        var box = $('#loginBox');
        var form = $('#loginForm');
        button.removeAttr('href');
        button.mouseup(function(login) {
            box.toggle();
            button.toggleClass('active');
        });
        form.mouseup(function() { 
            return false;
        });
        $(this).mouseup(function(login) {
            if(!($(login.target).parent('#loginButton').length > 0)) {
                button.removeClass('active');
                box.hide();
            }
        });
    });

    I tried adding this in:

    Code:
    $("#loginForm").slideToggle(200);
    But it would only slide down for a split second and then disappear.


    HTML

    Code:
                <div id="loginContainer">
                    <a href="#" id="loginButton"><span>Customer Login</span><em></em></a>
                    
                    <div style="clear:both"></div>
                    
                            <div id="loginBox">                
                                <form id="loginForm" form name="login_form" method="post" action="download/log.php?action=login">
                                    <fieldset id="body">
                                        <fieldset>
                                            <label for="user">Username</label>
                                            <input type="text" name="user" id="user" autofocus="true" />
                                        </fieldset>
                                        <fieldset>
                                            <label for="password">Password</label>
                                            <input type="password" name="pwd" id="password" placeholder="Type Here" />
                                        </fieldset>
                                        <input type="submit" name="submit" id="login" value="Sign in" />
                                    </fieldset>
                                    <span><a href="mailto:#">Forgot your password?</a></span>
                                </form>
                            </div>
                </div>



    Any help much appreciated.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there.

    Replacing box.toggle(); with box.slideToggle('slow'); will make the form slide down or up as the case may be.
    Is this what you were trying to achieve?

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the very thing.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •