在Zepto動畫函數中使用變量

我想在我的translateY中使用變量「drawerHeight」來指定我希望翻譯的多少。我需要獲得div的當前高度，因爲我計劃讓抽屜的內容響應。在Zepto動畫函數中使用變量

這是我知道我想要做什麼的情況之一，但無法弄清楚它的語法。

如果用任何固定的em/px金額替換「drawerHeight」，代碼就能正常工作，但這不是我想要做的。

var drawerHeight = $(".drawer").css('height'); 
    $(".toggle").click(function() { 
    drawerHeight 
    if (opened == false) { 
    $(".drawer").animate({ 
     translateY: '0', 

    }, 600, 'ease-in') 
    } 
    if (opened == true) { 
    $(".drawer").animate({ 
     translateY: '-drawerHeight', 

    }, 600, 'ease-out')  
    } 
    opened = !opened; 
    })

http://codepen.io/LivMac/pen/WwLEKe

來源

2016-05-09 Liv MacIntosh

作爲一個說明：爲了充分響應，我需要還可以減少/增加透明度，這樣當你調整窗口大小的內容不可見。 –

你需要改變這一行：

translateY: '-drawerHeight',

到

translateY: '-' + drawerHeight,

另外，我建議你使用現有的.height()功能與zept O操作。這樣，你的元素填充也被考慮在內。

var drawerHeight = $(".drawer").height(); 
translateY: '-' + drawerHeight + 'px',

這裏有一個筆：http://codepen.io/thewisenerd/pen/zqeRQa

來源

2016-05-09 03:51:42 thewisenerd

鏈接的代碼筆沒有完全解決問題，因爲當窗口大小調整時，它不會完全隱藏抽屜。我目前在該鏈接的解決方案確實適應調整大小的窗口。但是，我無法正確隱藏元素，以便在翻譯完成並調整窗口大小後不可見。又名我需要一些如何將元素的不透明度設置爲零或在動畫完成後更改其可見性後。不知道如何正確地做到這一點。 –

@Liv，那是因爲你正在靜態分配'''drawerHeight'''的值。將'''var drawerHeight = $（「。drawer」）.css（'height'）;'''移動到點擊函數中，以便每次都能動態計算它。如果你打算經常調整窗口的大小（在切換之間），你應該有一個調整大小的函數_corrects_ translateY，因爲元素高度可能已經改變了。 – thewisenerd

這個建議有幫助，我還必須添加一個條件來檢查抽屜是否已經設置爲關閉。否則，抽屜會在任何窗口大小調整時關閉。 –

在Zepto動畫函數中使用變量

回答

相關問題