動畫顯示和隱藏登錄框

我是一個總的javascript/jquery noob。

我有一個包含登錄框的div。該div的高度大約爲150px，並且放置在頁面的頂部，這樣在加載頁面時只能看到div的底部15px。

我想滑動div以便登錄框的其餘部分在點擊時顯示，並且在div的底部再次單擊時使其滑回備份。現在

，我做的：

$('#showLogin').click(function(e){ 
$('#formContainer').animate({top: "+=135px"} , 1500) 
e.preventDefault() 
})

這樣做是動畫幻燈片的div下來。但是，我如何檢查它是否已經滑落，以便我可以將它滑回去？

我應該檢查div的位置並決定它應該向上還是向下移動，還是有更好的方法來做到這一點？

該網站是here

來源

2012-01-23 ppp

「我應該檢查該div的位置，並決定是否應該上移或下移，或是否有更好的辦法做到這一點？」我會說這是最簡單的方法。 – j08691

如果在動畫結束之前再次點擊觸發器div，該怎麼辦？ – ppp

這取決於你想要它做什麼。您可以忽略點擊並讓動畫繼續，或使點擊收回div。 jQuery是非常靈活的那樣。） – j08691

試試這個jsFiddle的例子。它在點擊時用一種形式激活div，並在完全擴展後將其縮回。

基本jQuery是：

$('div').click(function() { 
    var pos = $(this).css('top') 
    if (!$(this).is(':animated')) { 
     if (parseInt(pos, 10) == 0) { 
      $(this).animate({'top': '-35px'}); // anim up 
     } 
     else { 
      $(this).animate({'top': '0px'}); //anim down 
     } 
    } 
});

來源

2012-01-23 17:45:31 j08691

這正是我想要的。 – ppp

我認爲你正在尋找.slideToggle()。舉例：http://jsfiddle.net/FL4zZ/

來源

2012-01-23 16:56:46

這很有幫助，但在這種情況下它不起作用，因爲單擊時顯示登錄框的div位於登錄框內。所以當我嘗試.slideToggle時，div消失了。我已經上傳了JavaScript文件，您可以在問題的鏈接上看到slideToggle的效果。 – ppp

動畫顯示和隱藏登錄框

回答

相關問題