Использование переменных в функции анимации Zepto

Question

Я хочу использовать переменную «drawerHeight» в моем translateY, чтобы указать, насколько я хочу, чтобы был перевод. Мне нужно получить текущую высоту div, потому что я планирую, чтобы содержимое ящика было отзывчивым.

Это одна из тех ситуаций, когда я знаю, что хочу, но не могу понять синтаксис, чтобы сделать это.

Код работает в настоящее время, если вы замените «drawerHeight» на любую фиксированную сумму em/px, но это не то, что я хочу сделать.

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

Answer 1

Вы должны изменить эту строку:

translateY: '-drawerHeight', 

к

translateY: '-' + drawerHeight, 

---

Кроме того, я бы рекомендовал вам использовать функцию .height() доступную с замедленным о. Таким образом, учитывается также добавление элементов.

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

Вот ручка: http://codepen.io/thewisenerd/pen/zqeRQa