jquery - 根据我的 div 高度更改最小高度

Question

所以我有一个幻灯片 block (它是响应式的)并且我已经为这个 block 设置了 min-height: 315px，我真的需要它，但是当我调整窗口大小时我需要减少 最小高度 顺利，现在我写了 jQuery 代码，所以它的工作，但它丑陋 tbh。

function minHeightBehavior(width) {
        width = parseInt(width);
        element = $('#block-views-home-page-slider-block');
        sliderHeight = $('.views-field-slider').height();
        element.css('min-height', '315px');
        if (width >= 769 && width < 960) {
            console.log(sliderHeight);
            element.css('min-height', sliderHeight +'px');

        }

    }

现在 block 在 slider 下方，正在向上跳跃，这是因为例如当窗口屏幕宽度为900时，元素高度为300如果 screen width 是 899，element height 也是 300。之后如果screen width为898，element height为299，依此类推
也许有更好的解决方案？

Answer 1

使用 .animate 方法。

(并开始使用 var 作为局部变量)

function minHeightBehavior(width) {
        var width = parseInt(width),
            element = $('#block-views-home-page-slider-block'),
            sliderHeight = $('.views-field-slider').height(),
            minHeight = 315;

        if (width >= 769 && width < 960) {
            minHeight = sliderHeight;
        }

        element.animate({height: minHeight + 'px'}, 500, function(){
           $(this).css({'min-height': minHeight + 'px', 'height':'auto'});
        });

    }