Liv Liv - 2 years ago 117
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() {
if (opened == false) {
translateY: '0',

}, 600, 'ease-in')
if (opened == true) {
translateY: '-drawerHeight',

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

Answer Source

You need to change this line:

  translateY: '-drawerHeight',


  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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download