Flexslider：初始加载后禁用smoothHeight答案

【问题标题】：Flexslider: Disable smoothHeight after initial loadFlexslider：初始加载后禁用smoothHeight
【发布时间】：2012-12-12 04:17:09
【问题描述】：

我喜欢页面加载时初始的 smoothHeight 的效果。我讨厌它在初始加载后对页面大小调整缓慢做出反应的方式。我希望保留初始页面加载的效果，然后回退到没有动画的默认调整大小。我已经追了几个小时了。通过在smoothHeight 函数本身的末尾将smoothHeight 变量设置回false，我可以在初始动画之后将变量切换回false，但这会在初始加载后禁用任何高度调整。这感觉就像一个非常简单的操作，但我想不通。提前感谢您的任何想法！

基本上，当这个块被执行一次时，它会设置高度，这样即使变量变回false，高度也不再灵活。

smoothHeight: function(dur) { if (!vertical || fade) { var $obj = (fade) ? slider : slider.viewport; (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).height()}, dur) : $obj.height(slider.slides.eq(slider.animatingTo).height()); } }

【问题讨论】：

干得好，有用。您应该删除答案部分并将其添加为您自己问题的实际答案，并将其标记为正确。

标签： jquery variables responsive-design flexslider woothemes

【解决方案1】：

这似乎已经做到了，我在 resize 函数的开头将 smoothHeight 变量设置回“false”，这样在初始页面加载后它就不会尝试在 resize 时设置动画高度。然后，我在 resize 函数中将 slider.viewport 高度设置为“100%”，这会重置高度，然后从那时起调整页面大小以响应:) 最后但并非最不重要的一点是，我将resetHeight 布尔变量添加到脚本的顶部，当第一次运行 resize 时设置为 false，这样它就不会浪费资源，每次页面时将视口高度设置为 100%调整大小。

resize: function() { if(resetHeight) { slider.viewport.height("100%"); resetHeight=false;} if (!slider.animating && slider.is(':visible')) { if (!carousel) slider.doMath(); if (fade) { // SMOOTH HEIGHT: methods.smoothHeight(); } else if (carousel) { //CAROUSEL: slider.slides.width(slider.computedW); slider.update(slider.pagingCount); slider.setProps(); } else if (vertical) { //VERTICAL: slider.viewport.height(slider.h); slider.setProps(slider.h, "setTotal"); } else { // SMOOTH HEIGHT: if (vars.smoothHeight) methods.smoothHeight(); slider.newSlides.width(slider.computedW); slider.setProps(slider.computedW, "setTotal"); } } }, smoothHeight: function(dur) { if (!vertical || fade) { var $obj = (fade) ? slider : slider.viewport; (dur) ? $obj.animate({"height": slider.slides.eq(slider.animatingTo).height()}, dur) : $obj.height(slider.slides.eq(slider.animatingTo).height()); } },

【讨论】：

【解决方案2】：

在调整大小时禁用平滑高度 FlexSlider，在调整大小时禁用过渡高度 FlexsSider。

在我的情况下，我不得不停止 FlexsSider 以在调整大小后顺利适应视口高度。

解决方案不在.js 文件中。

我只是想消除.css 中的过渡效果，这是造成延迟：

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

改成这样：

.flex-viewport {max-height: 2000px;}

最好的问候

【讨论】：