我喜欢页面加载时初始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());
}
}
答案 0 :(得分:0)
这似乎已经完成了,我在调整大小函数的开头将smoothHeight变量设置回“false”,这样在初始页面加载之后,它不会尝试在调整大小时设置动画高度。然后,我在调整大小函数中将slider.viewport高度设置为“100%”,这将重置高度,然后在调整页面大小时响应:)
最后但并非最不重要的是,我将resetHeight
布尔变量添加到脚本的顶部,当第一次调整大小时,该变量设置为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()); } },
答案 1 :(得分:0)
在调整大小时调整平滑高度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;}
最好的问候