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.