jQuery动画框

Question

我有一个框，我想点击链接时动画。链接在框内 - 因此我无法隐藏框并使用简单的slideToggle功能。 我想让盒子滑到底部位置：0px;，再次点击时它应该滑到底部：-71px;

这是我的标签'HTML：

    <!-- LOGIN -->
<div id="userlogin">
    <div class="topbutton"><a href="#"><span>Log ind</span></a></div>
    <form action="" method="POST" enctype="" onsubmit="document.getElementById('_form__submit').disabled = true;" target="" id="_form__form">
        <input type="hidden" name="module" value="Brugere" id="_form__module">
        <input type="hidden" name="page" value="login" id="_form__page">
        <input type="hidden" name="do" value="" id="_form__do">
        <input type="hidden" name="id" value="0" id="_form__id">
        <input type="hidden" name="lang_id" value="da" id="_form__lang_id">
        <input type="hidden" name="_form_" id="_form_" value="submit">
        <input type="hidden" name="when_done" value="" id="when_done">

        <div class="left">
            <p><span>Brugernavn</span><input type="text" name="username" value="" id="username" class="loginfield" /></p>
            <p><span>Adgangskode</span><input type="password" name="password" value="" id="password" class="loginfield" /></p>
        </div>
        <div class="right">
            <input type="submit" id="_form__submit" class="loginbutton" value="Log ind" /><br />
            <a href="/site/da/Brugere/forgot_password"><b>»</b> Glemt adgangskode?</a>
            <iframe width="0" height="0" src="" name="_form__iframe_save" frameborder="0" framespacing="0" scrolling="no"></iframe>
        </div>
        <div class="clear"></div>
    </form>
</div>
<!-- LOGIN -->

到目前为止这是jQuery

    $("#userlogin .topbutton a").click(function () {
    $("#userlogin").stop(true).animate({bottom: '0'}, {speed: 500});
}, function () {
    $("#userlogin").stop(true).animate({bottom: '-71px'}, {speed: 500});
});

但这不起作用，有人可以帮帮我吗？ ：）

Answer 1

使用toggle-event方法。

$("#userlogin .topbutton a").toggle(
function() {
    $("#userlogin").stop(true).animate({
        bottom: '0'
    }, 500);
}, function() {
    $("#userlogin").stop(true).animate({
        bottom: '-71px'
    }, 500);
});

演示http://jsfiddle.net/gaby/5ChVX/1/

Answer 2

尝试

    $("#userlogin .topbutton a").click(function () {
    $("#userlogin").stop(true).animate({bottom: '0'}, 500);
}, function () {
    $("#userlogin").stop(true).animate({bottom: '-71px'}, 500);
});