Question

我想使用变量＆＃34; drawerHeight＆＃34;在我的translateY中指定我想要翻译的程度。我需要获得div的当前高度，因为我计划抽屉的内容是有响应的。

这是我知道自己想做什么的情况之一，但无法弄清楚要做到这一点的语法。

如果您更换＆＃34; drawerHeight＆＃34;该代码目前有效。有任何固定的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

在Zepto动画功能中使用变量

1 个答案: