javascript - 在 Zepto 动画函数中使用变量

Question

我想在我的 translateY 中使用变量“drawerHeight”来指定我想要的翻译量。我需要获取 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,

---

此外，我建议您使用 zepto 提供的 .height() 函数。这样，您的元素填充也会被考虑在内。

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

这是一支笔:http://codepen.io/thewisenerd/pen/zqeRQa