首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Flexslider:在初始加载后禁用smoothHeight

Flexslider:在初始加载后禁用smoothHeight
EN

Stack Overflow用户
提问于 2012-12-12 12:17:10
回答 2查看 3.1K关注 0票数 2

我喜欢页面加载时初始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()); } }

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-12-13 09:48:43

然后,我在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()); } },

票数 0
EN

Stack Overflow用户

发布于 2013-07-05 03:34:26

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

在我的例子中,我不得不停止FlexsSider,以便在调整大小后平滑地适应视口的高度。

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

我只是想消除.css中的过渡效果,这会造成延迟:

代码语言:javascript
复制
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

更改为:

代码语言:javascript
复制
.flex-viewport {max-height: 2000px;}

诚挚的问候

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13832687

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档