在Zepto动画函数中使用变量

我想在我的translateY中使用变量“drawerHeight”来指定我希望翻译的多少。我需要获得div的当前高度，因为我计划让抽屉的内容响应。在Zepto动画函数中使用变量

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

如果用任何固定的em/px金额替换“drawerHeight”，代码就能正常工作，但这不是我想要做的。

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

来源

2016-05-09 Liv MacIntosh

作为一个说明：为了充分响应，我需要还可以减少/增加透明度，这样当你调整窗口大小的内容不可见。 –

你需要改变这一行：

translateY: '-drawerHeight',

到

translateY: '-' + drawerHeight,

另外，我建议你使用现有的.height()功能与zept O操作。这样，你的元素填充也被考虑在内。

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

这里有一个笔：http://codepen.io/thewisenerd/pen/zqeRQa

来源

2016-05-09 03:51:42 thewisenerd

链接的代码笔没有完全解决问题，因为当窗口大小调整时，它不会完全隐藏抽屉。我目前在该链接的解决方案确实适应调整大小的窗口。但是，我无法正确隐藏元素，以便在翻译完成并调整窗口大小后不可见。又名我需要一些如何将元素的不透明度设置为零或在动画完成后更改其可见性后。不知道如何正确地做到这一点。 –

@Liv，那是因为你正在静态分配'''drawerHeight'''的值。将'''var drawerHeight = $（“。drawer”）.css（'height'）;'''移动到点击函数中，以便每次都能动态计算它。如果你打算经常调整窗口的大小（在切换之间），你应该有一个调整大小的函数_corrects_ translateY，因为元素高度可能已经改变了。 – thewisenerd

这个建议有帮助，我还必须添加一个条件来检查抽屉是否已经设置为关闭。否则，抽屉会在任何窗口大小调整时关闭。 –

在Zepto动画函数中使用变量

回答

相关问题