是否可以通过 Easing 滑动切换 div 并设置最小高度？

Question

我有一个div，它使用slideToggle 和缓动来折叠和展开。

$('button').click(function () {
    $('div').slideToggle('2000', "easeOutBounce");
});

我希望它在向上滑动时具有最小高度，以便始终有一个小的可见内容。

因此，当它向下滑动时，具有 height:(div height) ，而在 slideUp 上，height:10px;

请注意，div 可以具有任意数量的高度，这就是我不使用动画的原因。

Answer 1

我能想到的最好的方法如下：

var toggleMinHeight = 30,
    duration = 2000,
    easing = 'swing';
$('.toggles').each(
    function(){
        $(this).attr('data-height',$(this).height());
    }).click(
    function(){
        var curH = $(this).height();
        if ($(this).is(':animated')){
            return false;
        }
        else if (curH == $(this).attr('data-height')) {
            $(this).animate(
                {
                    'height' : toggleMinHeight
                }, duration, easing);
        }
        else if (curH == toggleMinHeight){
            $(this).animate(
                {
                    'height' : $(this).attr('data-height')
                }, duration, easing);
        }
    });

JS Fiddle 演示。

然而，这个演示有一些问题：

• 除了基本 jQuery 库指定的功能之外没有缓动功能（允许访问“摇摆”和“线性”），但是可以通过包含 jQuery UI 来改进这一点。
• 几乎可以肯定，它可以被制作成一个插件，这样看起来就不那么难看了。
• 需要一个大的、功能齐全但不漂亮的 if/else if 语句。
• 需要至少执行一次 each() 来分配 div 元素的“默认”/“自然”高度。
• 如果 div 不是 position:absolute，它们会缩小到内联元素的基线（因为它们是 display: inline-block< /code>），如果它们是 float: left （或者显然是 float: right），这可能不是问题。

希望它有用，但就目前的状态来说肯定不理想。

---

编辑以发布上述插件化版本（它保留了与以前相同的所有问题）：

(function($) {

    $.fn.slideTo = function(slideToMin, duration, easing) {

        var slideToMin = slideToMin || 30,
            duration = duration || 500,
            easing = easing || 'linear';
        $(this)
            .attr('data-height', $(this).height())
            .click(
                function() {
                    var curH = $(this).height();
                    if ($(this).is(':animated')) {
                        return false;
                    }
                    else if (curH == $(this).attr('data-height')) {
                        $(this).animate({
                            'height': slideToMin 
                        }, duration, easing);
                    }
                    else if (curH == slideToMin) {
                        $(this).animate({
                            'height': $(this).attr('data-height')
                        }, duration, easing);
                    }
                });

        return $(this);
    };
})(jQuery);

$('.toggles').slideTo(50,1500,'swing');

JS Fiddle 演示。

1. SlideToMin：这可以是带引号的字符串，例如 '3em'、'20px'，也可以是不带引号的数字，例如 30，代表您要达到的高度想要元素滑动到。如果没有提供单位，则高度默认以像素为单位。
2. 持续时间：动画持续的毫秒数。
3. easing：带引号的字符串，定义动画中使用的缓动类型；如果没有 jQuery UI，这要么是“线性”，要么是“摆动”。 jQuery UI 可能还有其他选项，但这尚未经过测试。如果未指定，动画默认为“线性”。 因为在带引号的字符串中使用单位会导致最终的else if 返回 false（显然，我想...叹息），请仅使用该变量的不带引号的数字参数（或编辑插件以正确处理带单位的带引号的字符串...）。

在发布本文之前，我没有意识到一个更大的问题，即插件版本仅允许动画一次迭代。我对此感到困惑，尽管也许对其他人来说这是显而易见的？

好吧，看来是 if 语句中对高度的评估。使用 3em 导致最终的else if ： curH ==toggleMinHeight 返回 false。大概是由于该变量中存在单位 (em)。上述指南已被编辑，以反映不应使用这些单位。

---

参考文献：

• animate()。
• :animated 选择器。
• attr()。
• click()。
• each()。
• height()。
• is()。

Answer 2

并不真地。当调用 Slide 方法时，它会获取 style 属性

display: none;

但是，您可以通过使用回调函数动态修复它

$('div').slideToggle('2000', "easeOutBounce", function() {
     $('div')[0].style.height="//whatever//"     //You could also use the min-height property
     $('div')[0].style.display="inline";
);

动画到底有什么问题？

Answer 3

我建议你玩点诡计；

为什么不在滑动 div 上方有一个具有相同宽度和颜色的 div，以便它始终显示并作为滑动部分的一部分出现