Liv Liv - 7 months ago 25
Javascript Question

Using Variables in Zepto Animation function

I want to use the variable "drawerHeight" in my translateY to specify how much I want the translation to be. I need to get the current height of the div because I plan for the drawer's content to be responsive.

This is one of those situations where I know what I want to do, but can't figure out the syntax to do it.

The code works currently if you replace "drawerHeight" with any fixed em/px amount, but that isn't what I want to do.

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

You need to change this line:

  translateY: '-drawerHeight',

to

  translateY: '-' + drawerHeight,

Also, I'd recommend you to use the .height() function available with zepto. That way, your element padding is also taken into consideration.

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

Here's a pen: http://codepen.io/thewisenerd/pen/zqeRQa