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:

$(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:

$("#loginForm").slideToggle(200);

But it would only slide down for a split second and then disappear.

HTML

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

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?

That’s the very thing.

Thanks :smiley: