Search code examples
javascriptjquerycsssyntaxzepto

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

Solution

  • 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