jQuery動畫框

Question

我有一個框，我想點擊鏈接時進行動畫處理。鏈接在盒子內 - 因此我無法隱藏盒子並使用簡單的slideToggle函數。 我希望框可以滑動到位置bottom：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); 
});